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.
Related
I'm trying to get space around my items in a horizontal flatlist, no matter how I try it doesn't seem to work:
const renderItem = ({item}) => {
return (
<View style={styles.item}>
<Image
source={{uri: content.uri}}
style={styles.image}
/>
<View>
<Text style={styles.contentTitle}>{content.title}</Text>
<Text style={styles.contentText}>{content.releaseDate}</Text>
</View>
</View>
)
}
<View style={styles.container}>
{header}
<View style={{width: '100%', justifyContent: 'space-around', backgroundColor: 'green'}}>
<FlatList
data={data}
pagingEnabled={true}
horizontal={true}
renderItem={renderItem}
keyExtractor={item => item.id}
ref={flatList}
/>
</View>
</View>
const styles = StyleSheet.create({
container: {
width: windowWidth,
marginTop: 15,
paddingBottom: 15,
borderBottomWidth: 1,
borderBottomColor: Colors.borderBlue,
backgroundColor: Colors.backgroundGenericTransparent,
},
item: {
width: windowWidth / 3.1,
backgroundColor: 'red',
},
image: {
width: '100%',
height: 220,
},
})
result:
As you can see the items are all together on the left even though I have added a space-around property on the container. Not show how I can resolve this.
use ItemSeparatorComponent
<FlatList
data={data}
pagingEnabled={true}
horizontal={true}
renderItem={renderItem}
keyExtractor={item => item.id}
ref={flatList}
ItemSeparatorComponent={() => {
return (
<View
style={{
height: "100%",
width: 10,
}} />
);
}}
/>
Use this prop on flatlist:
columnWrapperStyle={{ justifyContent: "space-between" }}
Not sure what you are trying to achieve.
Is that what you want?
snack here
Just add horizontal padding to your container. and no matter how big your items get you will always have spacing left and right. If the item gets too big you can start to scroll.
<View style={styles.messageGalleryContainer}>
<FlatList
data={files}
renderItem={renderImageGalleryItem}
keyExtractor={(item) => item?._id}
horizontal
showsHorizontalScrollIndicator={false}
ItemSeparatorComponent={() => <View style={{ width: 10 }} />} // add this line
contentContainerStyle={styles.messageGalleryItemContainer}
/>
</View>
You should use ItemSeparatorComponent with an empty component or with any element you want.
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 want my app to add text underneath the goal section but flex is not letting me do that even if I create new components in native P.S Still a beginner
import React, { useState } from "react";
import { StyleSheet, View, TextInput, Button, Text } from "react-native";
export default function App() {
return (
<View style={styles.Container}>
<View style={styles.GoalInp}>
<TextInput
placeholder="Course Goal"
style={{ overflow: "scroll" }}
onChangeText={goalInputHandler}
value={enteredGoal}
/>
</View>
<View>
<Button title="ADD" onPress={addGoalHandler} />
</View>
<View>
{couseGoals.map(goal => (
<Text>{goal}</Text>
))}
</View>
</View>
);
}
const styles = StyleSheet.create({
Container: {
padding: 50,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
},
GoalInp: {
borderWidth: 1,
width: "80%",
padding: 10,
borderColor: "black"
}
});
You need to bring the listing outside the Container View, as the flex-direction of Container is row, all items will be in a row including form.
My modified code is given below
<View style={styles.wrapper}>
<View style={styles.Container}>
<View style={styles.GoalInp}>
<TextInput
placeholder="Course Goal"
style={{ overflow: "scroll" }}
/>
</View>
<View>
<Button title="ADD" onPress={this.addGoalHandler} />
</View>
</View>
<View>
{this.state.couseGoals.map(goal => (
<Text>{goal}</Text>
))}
</View>
</View>
const styles = StyleSheet.create({
wrapper:{
flex:1,
},
Container: {
padding: 50,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
},
GoalInp: {
borderWidth: 1,
width: "80%",
padding: 10,
borderColor: "black"
},
});
I think that you use to much Vieuw elements.
You should for example use a Text for where your text need to print out.
But I think I have it.
You wrapped everything into a View with a style of;
flexDirection: "row",
Not that good if you don't want to have the whole View on one line....
Issue solved?
I'm trying to create a layout that utilizes flexbox' automatic sizing but also contains fixed-size items:
<View style={{ height: 70, alignItems: "center" }}>
<Text style={{ flex: 1, textAlign: "right", paddingRight: 10 }}>left text</Text>
<Image style={{ width: 70, height: 70 }} src={require('./img.png')} />
<Text style={{ flex: 1, textAlign: "left", paddingLeft: 10 }}>right text</Text>
</View>
I want the image to be centered in the UI and have the text views equally take the remaining width. The actual result is that one of the text views is larger than the other as if the rendering doesn't take the width of the image view into account.
Finally found the correct way of doing this. To have fixed size items in a flex layout one shouldn't use width/height but flex: 0 and flexBasis. This approach initially didn't work for me because a component wrapping my component wasn't sized correctly and messed with the flex rendering. flexBasis seems to be density-independent pixels when it is set to an absolute number.
Proof of concept on expo.io
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
export default class App extends Component {
render() {
return (
<View>
<Text>Test</Text>
<View style={styles.container}>
<Text style={styles.text1}>{"Left\nText"}</Text>
<View style={styles.view} />
<Text style={styles.text2}>Test</Text>
</View>
<View style={styles.container}>
<Text style={styles.text1}>{"Left\nText"}</Text>
<View style={styles.view} />
<Text style={styles.text2}>Test</Text>
</View>
<View style={styles.container}>
<Text style={styles.text1}>{"Left\nText"}</Text>
<View style={styles.view} />
<Text style={styles.text2}>Test</Text>
</View>
<Text>Test</Text>
<View style={styles.container}>
<Text style={styles.text1}>{"Left\nText"}</Text>
<View style={styles.view} />
<Text style={styles.text2}>Test</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: "row",
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
view: {
flex: 0,
flexBasis: 50,
height: 50,
backgroundColor: "red",
},
text1: {
flex: 1,
textAlign: "right",
paddingRight: 10,
},
text2: {
flex: 1,
textAlign: "left",
paddingLeft: 10,
}
});