I have the following component in React Native:
<View styleName="nav">
<Back />
<Image styleName="logo" style={{ alignItems: "center", alignSelf: "center", justifyContent: "center" }} source={Img} />
</View>
As you can see, I am trying just about everything to center the logo, with no luck. Every example I am seeing for flexbox shows > 2 items.
Nav has the following styles:
.nav {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 70;
padding-top: 20;
}
Logo size is set:
.logo {
width: 100;
height: 40;
}
Right now I am getting something like this:
[<Back Logo]
I want something like this:
[<Back Logo ]
You could set the <Back/> component's flex-basis: 50%;
Maybe silly one, but try to wrap logo into the container and set width of that container and width of <Back /> to 33% like this:
<View styleName="nav">
<Back styleName="back" />
<View styleName="logoContainer">
<Image styleName="logo" style={{ alignItems: "center", alignSelf: "center", justifyContent: "center" }} source={Img} />
</View>
</View>
And in styles:
.logoContainer {
width: 33%;
height: 40;
}
.back {
width: 33%;
}
Try this:-
<View style={{flexDirection: 'row'}}>
<View style={{flex: 2}}> // it may vary according to you want
<Back /> // your Back component
</View>
<View style={{flex: 8, alignItems: 'center'}}> // you can also adjust flex
<Image styleName="logo" source={Img} /> // give height width to image
</view>
</View>
<View style={{flexDirection: 'row', alignItems:'center',justifyContent:'center'}}>
<View style={{position:'absolute',left:10}}> // it may vary according to you want
<Back /> // your Back component
</View>
<View style={{}}>
<Image styleName="logo" source={Img} /> // give height width to image
</view>
</View>
Related
I have something like:
<View style={{flex: 1, flexDirection: 'column'}}>
<View style={{ height: 30}}>...stuff</View>
<View style={{ flexGrow: 1}}>
<Image
style={{
width: '100%',
height: '100%',
}}
source={{
uri: mediaUrl,
}}
resizeMode='cover'
/>
</View>
<View style={{maxHeight: '50%'}}>...stuff</View>
</View>
So you see the bottom View adjusts based on its content, and therefore the middle one does too. The issue is the image sometimes pushes the container to not respect the third container max height.
How do I get around this?
you have to add resizeMode='cover' inside style like given below ex:
<Image
style={{
width: '100%',
height: '100%',
resizeMode='cover'
}}
source={{
uri: mediaUrl,
}}
/>
for more details => https://mehrankhandev.medium.com/understanding-resizemode-in-react-native-dd0e455ce63
In my React Native 0.66 app component, a Text and TextInput needs to be in one line and occupied half of the screen width. Here is the view code used:
<View style={{flex:1, flexDirection:'row', marginVertical: hp("1%")}}>
<View style={{flex:1, flexDirection:"row", width:wp("50%"), textAlign:"left"}}>
<Text style={styles.textTitle}>姓名:</Text>. //<<==Text
<TextInput style={styles.textTitle} //<<==TextInput
placeholder="姓名"
onChangeText={changeName}
defaultValue={name}
multiline={false}
/>
</View>
<View style={{flex:1, flexDirection:"row", width:wp("50%"),textAlign:"left"}}>. //<<==here is row
<Text style={styles.textTitle}>别号:</Text>
<TextInput style={styles.textTitle}
placeholder="别号"
onChangeText={changeAlias}
defaultValue={alias}
multiline={false}
/>
</View>
</View>
const styles = StyleSheet.create({
textTitle: {
height:hp("10%"),
fontSize:14,
},
container: {
paddingTop:0,
//justifyContent: 'center',
},
})
The problem with the view code above is that the TextInput was far below the Text even though both of them are in one row with the same height. What is missing here and how to align Text and TextInput in one line?
<View style={styles.row}>
<Text style={styles.textTitle}>别号:</Text>
<TextInput style={styles.textTitle}
placeholder="别号"
onChangeText={changeAlias}
defaultValue={alias}
multiline={false}
/>
</View>
const style = stylesheet.create({
row: {
flex: 1,
flexDirection: 'row',
width: "wp('50%')",
textAlign: "left",
display: flex,
justifyContent: "space-between",
alignItems: "center"
}
textTitle: {...},
container: {...}
})
I think you missed adding display: flex; to the View Content.
I replaced the style class row.
This will work for you. thanks.
You have to add display:flex to your View component.
You can also use this
<SafeAreaView style={{flex:1}}>
<View style={{flexDirection:"row",flex:1,justifyContent:"center"}}>
<Text style={{flex:1,textAlign:"center",backgroundColor:"blue",color:"white",height:40,paddingTop:10}}>Name</Text>
<TextInput
style={{backgroundColor:"red",flex:1,height:40}}
placeholder={"hello"}
/>
</View>
</SafeAreaView>
I hope it solve your Query.
You can use the following mini-code for reference.
https://codesandbox.io/embed/hungry-meninsky-wv08l?fontsize=14&hidenavigation=1&theme=dark
I want to fix the footer on the bottom of the page,
Thats why my whole container was in flex:1 so it takes all the space,
and in my footer, i added position:"absolute",marginBottom:0,, the footer affected so badly which i didnt expect. It goes to up like in the header of the page, then i deleted it,
How can i fix it on bottom of page?
Here is the related code.
<SafeAreaView style={{ flex: 1, backgroundColor:"#ffffff", }}>
{/* Footer */}
<View style={{ flexDirection:"row", alignItems:"center", justifyContent:"space-between",marginHorizontal:35,}}>
<View> // here there are some code
<View>
<Home height={30} width={22} fill={"#1E2439"} />
<Ratio height={30} width={22} fill={"#1E2439"} />
<Time height={30} width={22} fill={"#1E2439"} />
<User height={30} width={22} fill={"#1E2439"} />
</View>
</View>
</SafeAreaView>
Here how the page seen:
Position is from the css language.
{
position:"absolute",
bottom:0
}
here is my code for fixed footer
<View style={{flex:1}}>
<ScrollView style={{flex:1}}>
/// some Code
</ScrollView>
// here is bottom bar
<View style={{height: 60, justifyContent: 'center', borderTopLeftRadius: 20, borderTopRightRadius: 20, flexDirection: 'row', alignContent: 'center', alignItems: 'center'}}>
<View style={{flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'}}>
//Here is you bottom icon or image
<View>
</View>
</View>
The position is from the CSS language.
{
position:"absolute",
bottom:0,
height: 60
}
I need to achieve this:
https://jsfiddle.net/ghxfpL7j/1/
In React Native but:
You can't have a View inside a Text
You can't set a margin or padding for a Text
I tried having the "C" inside a View and the text and then another view for the other Text with the number but I couldn't achieve the same because when the name is too long it does not work.
This is what I tried:
<View style={a}>
<View style={b}><Text style={c}>C</Text></View>
<Text style={d}>Player name</Text>
<View style={e}>20</View>
</View>
and then styles:
a: {
flexDirection: 'row',
flexWrap: 'wrap'
}
b:{
width: 20,
backgroundColor: '#000'
}
c:{
color: '#ddd
}
d:{
flex: 1,
text-align: 'right'
}
e:{
text-align: 'right'
}
Per your link, which could be:
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1 }}>
<Text>C</Text>
</View>
<Text>Player Name</Text>
<Text>25</Text>
</View>
Using React-Native I need to centre my Image and component LYDSceneQuestion:
const SplashScreen = () => {
return (
<View style={styles.container}>
<LYDSceneQuestion text="Welcome to" />
<Image source={theme.images.logo} style={styles.logo} />
<NextButton onPress={onNext} />
</View>
);
};
export default SplashScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
},
logo: {
flex: 1,
width: 300,
height: 100,
resizeMode: 'contain'
}
});
Currently my image aligns to the bottom, how I can I centre it vertically?
I will suggest a small technique using flex,give your parent view flex one and then arrange the components in separate child views inside it and give them equal flex just like i have done below.
<View style={styles.container,{flex: 1}}>
<View style={{flex: 2}}>
<LYDSceneQuestion text="Welcome to" />
</View>
<View style={{flex: 2}}>
<Image source={theme.images.logo} style={styles.logo}/>
</View>
<View style={{flex: 2}}>
<NextButton onPress={onNext} />
</View>
</View>
I think if you follow this you can centre it vertically.