I was trying to make an app on React-Native
To start, I did mere basic where I wanted to make a bottom Navigation
This is what I did at start to test
import React, { Component } from 'react'
import {
StyleSheet,
View,
Text,
Image
} from 'react-native';
class MainScreen extends Component {
constructor () {
super ()
this.board = []
}
render () {
return (
<View style={MainScreenBox}>
<View style={GridBox}>
<Text> Testing..........</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
MainScreenBox: {
display: "flex",
flexDirection: "column"
},
GridBox: {
marginTop: "90%",
marginLeft: 5,
marginRight: 5
}
})
const {
GridBox,
MainScreenBox
} = styles
Here, I did something as simple as marginTop: "90%", expecting the text would come at bottom but it still remains half way on the screen.
Question: Any Idea why this could be happening?
Clean all styles and put this to MainScreenBox style:
const styles = StyleSheet.create({
MainScreenBox: {
flex: 1,
justifyContent:'flex-end'
}
})
and use style={styles.MainScreenBox} to apply in root View. You can refer to flex doc to see how FlexBox works. Also notice that flexDirection is column by default in react native you do not have to set it and display:"flex" neither.
Add a flex weight (flex:1) to your main container.
MainScreenBox: {
flex:1,
display: "flex",
flexDirection: "column"
},
Related
I calculate various margin's based on the images i'm displaying in my app, which range in different pixel widths each time images are selected, so my need us quite dynamic. Once i calculate the margin widths, i save them in state variables marginL and marginR.
However i can't seem to access these in StyleSheet, i just get an error message to say marginLeft is undefined.
const styles = StyleSheet.create({
container: {
flex: 1,
},
gap: {
flex: 0.5,
marginLeft: this.state.marginL,
marginRight: this.state.marginR
}
})
How do i get access to my variables?
I'm not sure about dynamically changing in StyleSheet value. But when you calculate the margin widths you can override your style something like below
<View style={[styles.gap, {marginLeft: this.state.marginL, marginRight: this.state.marginR}]} />
Check complete example
import React, { Component } from "react";
import { View, StyleSheet } from "react-native";
export default class App extends Component {
state = {
marginL: 10,
marginR: 20
};
render() {
return (
<View style={styles.container}>
<View style={[ styles.gap, { marginLeft: this.state.marginL, marginRight: this.state.marginR }]} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "red"
},
gap: {
flex: 0.5,
marginLeft: 0,
marginRight: 0,
backgroundColor: "green"
}
});
This not be the optimal solution but hope this helps you. Feel free for doubts.
I am starting with React-Native. I was able to see the <Text>. Then I progressed in adding my <TextInput>
import React from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';
export default class App extends Component {
state = {
placeName: ''
}
placeNameChangedHandler = event => {
alert(event)
}
render(){
return (
<View style={styles.container}>
<Text>Ayman</Text>
<TextInput
style={{width:300, borderColor:"black"}}
value={this.state.placeName}
onChangeText={this.placeNameChangedHandler}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
I am able to bundle my Javascript app, but the UI shows a blank screen.
Note that I'm a novice and I'm using expo on my phone for UI device.
Add borderWidth: 1 in TextInput styles and it will show the empty textinput.
I am currently learning to build a shopping app and working on the cart functionality of the react native application. I have made a separate shopping cart icon component which I am passing into the main application. However, when I try to display the number of items in the shopping cart icon using the length attribute, the length is not getting displayed. I am a beginner and any help will be appreciated.
ShoppingCartIcon.js
import React, { Component } from 'react';
import { View, Text, Picker,Button } from 'react-native';
import { connect } from 'react-redux';
import Icon from 'react-native-vector-icons/FontAwesome';
import { Actions } from 'react-native-router-flux';
goToNextScreen = () => {
Actions.cartScreen();
}
const ShoppingCartIcon = (props) => (
<View style={{position:'absolute', top:0,left:0,width: 40,height: 40,borderRadius: 40/2,paddingTop:3}}>
<View style={{
position: 'absolute', height: 20, width: 20, borderRadius: 10, backgroundColor: 'rgba(6,21,42,0.8)', top:0, left: 5, alignItems: 'center', justifyContent: 'center', zIndex: 2000
}}>
<Text style={{ color: 'white', fontWeight: 'bold',fontSize:10 }}>{props.cartItems.length}</Text>
</View>
<Icon onPress={() => this.goToNextScreen()} name="shopping-cart" style ={{fontSize:30, position:'absolute', top:0,padding:7, left:0, color:'#fe003a'}} />
</View>
)
const mapStateToProps = (state) => {
return {
cartItems: state
}
}
export default connect(mapStateToProps)(ShoppingCartIcon);
Output:
The image of the shopping cart icon
In the mapStateToProps function, you set cartItems: state, but maybe you'd have to do cartItems: state.YourReducerName.yourArrayName. Could you post the reducer code as well?
I am learning React Native and applying some simple styling to a View. But the styling is not showing up at all. What am I doing wrong?
import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class Header extends Component {
render() {
return (
<View style={styles.container}>
<Text> Hello </Text>
</View>
)
}
}
const styles = {
container: {
backgrounColor: '#ddd',
color: 'red',
paddingTop: 14
}
}
If I change it to <View style={{backgroundColor: '#ddd', color: 'red', paddingTop: 14}}> it would work, but why won't the first approach work?
I am using:
react-native-cli: 2.0.1 and
react-native: 0.57.8
You need to use StyleSheet to create JavaScript styles in react-native
Import StyleSheet from react-native and change your variable style to:
const styles = StyleSheet.create({
container: {
backgrounColor: '#ddd',
color: 'red',
paddingTop: 14
}
});
I am trying to add a stateless component to my button.
const button = ({onButtonPress, buttonText}) => {
return (
<TouchableHighlight
onPress={() => onButtonPress()}>
<ButtonContent text={buttonText}/>
</TouchableHighlight>
)
};
and get this error:
Warning: Stateless function components cannot be given refs (See ref "childRef"
in StatelessComponent created by TouchableHighlight).
Attempts to access this ref will fail.
I have read up on the issue but I am still new to javascript and RN and have not found a solution. Any help would be appreciated.
full code:
GlossaryButtonContent:
import React from 'react';
import {
View,
Text,
Image,
StyleSheet
} from 'react-native';
import Colours from '../constants/Colours';
import {
arrowForwardDark,
starDarkFill
} from '../assets/icons';
type Props = {
text: string,
showFavButton?: boolean
}
export default ({text, showFavButton} : Props) => {
return (
<View style={styles.container}>
{showFavButton &&
<Image
style={styles.star}
source={starDarkFill}/>}
<Text style={[styles.text, showFavButton && styles.favButton]}>
{showFavButton ? 'Favourites' : text}
</Text>
<Image
style={styles.image}
source={arrowForwardDark}
opacity={showFavButton ? .5 : 1}/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center'
},
favButton: {
marginLeft: 10,
color: Colours.darkTextHalf
},
text: {
flex: 1,
paddingTop: 5,
marginLeft: 20,
fontFamily: 'Bariol-Bold',
fontSize: 24,
color: Colours.darkText
},
image: {
marginRight: 20
},
star: {
marginLeft: 10
}
});
GlossaryButton:
import React from 'react';
import {
TouchableHighlight,
StyleSheet
} from 'react-native';
import Colours from '../constants/Colours';
import ShadowedBox from './ShadowedBox';
import GlossaryButtonContent from './GlossaryButtonContent';
type Props = {
buttonText: string,
onButtonPress: Function,
rowID: number,
sectionID?: string,
showFavButton?: boolean
}
export default ({buttonText, onButtonPress, rowID, sectionID, showFavButton} : Props) => {
return (
<ShadowedBox
style={styles.container}
backColor={showFavButton && Colours.yellow}>
<TouchableHighlight
style={styles.button}
underlayColor={Colours.green}
onPress={() => onButtonPress(rowID, sectionID)}>
<GlossaryButtonContent
text={buttonText}
showFavButton={showFavButton}/>
</TouchableHighlight>
</ShadowedBox>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
height: 60,
marginBottom: 10,
borderRadius: 5
},
button: {
flex: 1,
borderRadius: 5
}
});
Basically, Stateless components cannot have refs.
So, having a stateless component in the middle of the render tree will create a void in the ref chain, meaning you cannot access lower-down components.
So, the problem comes from trying to do this:
let Stateless = (props) => (
<div />
);
let Wrapper = React.createClass({
render() {
return <Stateless ref="stateeee" />
}
});
TouchableHighlight needs to give a ref to its child. And this triggers that warning.
Answer:
You can't actually make a stateless component a child of TouchableHighlight
Solution:
Use createClass or class to create the child of TouchableHighlight, that is GlossaryButtonContent.
See this github issue for more info and this one