I'd like to have a header with a back button to the left and a text/title in the center of the header.
Like this:
<View style={styles.topbar}>
<TouchableOpacity>
<Text style={styles.topbarButton}>{" <"}</Text>
</TouchableOpacity>
<View>
<Text style={styles.topbarText}>Title</Text>
</View>
</View>
I'm trying to use flex in styles.topbar but nothing of what I tried seems to work.
I am pretty new to flex and React Native so some help with the styles would be great.
Thanks all.
Here we go:
<View style={{width:devicewidth,flexDirection:'row',height:40,top:0,position:'absolute'}}>
<TouchableOpacity style={{left:0,position:'absolute',alignItems:'flex- start'}}>
<Text style={styles.topbarButton}>{" <"}</Text>
</TouchableOpacity>
<View style={{justifyContent:'center'}}>
<Text style={styles.topbarText}>Title</Text>
</View>
</View>
The above code will print back button at the top left and text at the center. Flex direction is used to indicate view to print in a row direction.
Related
I am using react-pdf/renderer for displaying pdf . I am currently using dynamic text to show content of pdf. I want to add padding left to view which is inside the another view. I have applied various CSS properties to add padding but it is not working.
Below is my code.
<View style={styles.section}>
<Text >
{'\n'}{today} {'\n'}{'\n'}
<View ><Text > <Text style={{ margingLeft : '50px' }}>⦁</Text> someValue {'\n'}</Text>
</View>
</Text>
</View>
I have also tried inline CSS.
If anyone knows solution. Please help.
Thanks.
I have a TouchableOpacity with a Text component inside it in my React Native app, and I want the TouchableOpacity to be only as wide as the Text. I've tried doing this:
<TouchableOpacity style={{flexDirection: 'row', flexBasis: 0, flexShrink: 1}}>
<Text>text</Text>
</TouchableOpacity>
But the TouchableOpacity is still as wide as the whole screen. flexGrow is 0 by default, so I figured by allowing the TouchableOpacity to shrink with flexShrink and having its flexBasis be zero,
You can use the alignself style for TouchableOpacity
<TouchableOpacity style={{backgroundColor: 'red', alignSelf: 'flex-start' }}>
<Text>text</Text>
</TouchableOpacity>
I want to render 7 buttons in a row with equal width to fill up all the available space horizontally.
render() {
return (
<FlatList
data={this.state.days}
renderItem={({ item }) => <View style={styles.button}><Button title={item.getDate().toString()} /></View>}
keyExtractor={item => item.getDate().toString()}
horizontal={true}
style={styles.list}
/>
);
}
const styles = StyleSheet.create({
list: {
display: 'flex'
},
button: {
flex: 1
}
});
They are inside a flatlist, wrapped in a view because I cannot style buttons directly.
In regular flexbox in an HTML page this approach works.
This what I get in React Native:
Maybe there are some flatlist behaviour I'm not familiar with?
First of all when you are styling in react native everything is already in flex so you don't have to do display : flex
If you want to render 7 buttons with the same width in a row make sure that all of them have the same parent. Then use flex:1 in each one of them.
What is happening when you do flex:1 when you put a number in front of flex in your styles in this particular situation it divides your parent into those many parts and give it to the child.
So all your button will have 1/7th of the width. If you put flex:2 in one of the styles then that button will have 2/7th of the width and the rest will have 1/7th.
Please feel free to ask for more clarity on the above said.
I got the same issue, I have added View component cover for each Button like the code below:
<View style={{flexDirection:"row"}}>
<View style={{flex:1}}>
<Button title="Add" />
</View>
<View style={{flex:1}}>
<Button title="Clear" />
</View>
//....
</View>
Have you tried adding flex: 1 to the list so that it takes up the entire horizontal space?
in my point of view, try adding justifyContent as space-between in the style object list
in each item ,set this style:
width:width/7
I am building a home project in react-native. While playing with layouts, Views inside a parent container are overlapping. I am using flexbox for designing layout of a form, but unable to get through it. Below is sample code that I have written to explain what issue is.
<View style= {styles.Container}>
<View style={{flex:1, backgroundColor:'red'}}><Text>RED</Text></View>
<View style={{flex:1, backgroundColor:'green'}}><Text>GREEN</Text></View>
<View style={{flex:1, backgroundColor:'blue'}}><Text>BLUE</Text></View>
</View>
Container: {
flex:1,
backgroundColor:'grey',
flexDirection:'column',
}
With the part of your code which you posted nothing is wrong. Perhaps there's something wrong in the parts you didn't provide.
Here's your code in a working example: https://repl.it/Iqek
How to create button like this:
using react-native?
There are a lot of ways to answer this question, depending on what else you have going on in your application. The one thing I've found that is important when styling in React Native is understanding the FlexBox properties, which will allow you to do pretty much any layout you can imagine once you learn them.
I've gone ahead and set up a sample project here with a button similar to the one above implemented in code, and I've also posted the code below. Note that there are a ton of ways to achieve this, this is just one of the many ways.
https://rnplay.org/apps/yNKoGA
<TouchableHighlight underlayColor="#ededed" style={{borderRadius:10, height:60, borderWidth:1, marginLeft:80, marginRight:80}}>
<View style={{flexDirection: 'row', }}>
<View>
<Image style={{marginTop:9, marginLeft:4,width:40, height:40}} source={{uri: 'http://www.iconpng.com/png/iconographicons/basketball19.png'}} />
</View>
<Text style={{ fontSize:20, marginLeft:10, marginTop:16 }}>Login</Text>
</View>
</TouchableHighlight>