Hi want to create UI in my react-native app like this
but I am getting like this
here is my code
<View style={{flex: 1,flexDirection:'row'}}>
<View style={{flexDirection:'column',justifyContent:'center',alignItems:'center',alignSelf:'center'}}>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-end',alignSelf:'flex-end',margin:10}}>
<Item style={{backgroundColor:AppColors.white,borderRadius:10,flexDirection:'column',height:100, width:100}}></Item>
</View>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-start',alignSelf:'flex-end',margin:10}}>
<Item style={{backgroundColor:AppColors.white,borderRadius:10,flexDirection:'column',height:100, width:100}}></Item>
</View>
</View>
<View style={{justifyContent:'center',alignItems:'center',alignSelf:'center'}}>
<Item style={{backgroundColor:AppColors.colorPrimaryDark,
borderRadius:10,height:100, width:100, borderRadius:100/2}}></Item>
</View>
<View style={{flexDirection:'column',justifyContent:'center',alignItems:'center',alignSelf:'center'}}>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-end',alignSelf:'flex-start',margin:10}}>
<Item style={{backgroundColor:AppColors.white,borderRadius:10,flexDirection:'column',height:100, width:100}}></Item>
</View>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-start',alignSelf:'flex-start',margin:10}}>
<Item style={{backgroundColor:AppColors.white,borderRadius:10,flexDirection:'column',height:100, width:100}}></Item>
</View>
</View>
</View>
You have have to use position:'absolute' and put the circle element as the last element of the elements list so it comes to top (no need to use zIndex).
also the container div must have styles for child elements to be centered. There won't be an issue since you can position that container div where ever you want.
Following code works as you expected. (I replaced 'Item' with 'View' and different colors. You can change those things back)
<View style={{flex: 1,flexDirection:'row', backgroundColor:'green', justifyContent:'center', alignItems:'center'}}>
<View style={{flexDirection:'column',justifyContent:'center',alignItems:'center',alignSelf:'center'}}>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-end',alignSelf:'flex-end',margin:10}}>
<View style={{backgroundColor:'white',borderRadius:10,flexDirection:'column',height:100, width:100}}></View>
</View>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-start',alignSelf:'flex-end',margin:10}}>
<View style={{backgroundColor:'white',borderRadius:10,flexDirection:'column',height:100, width:100}}></View>
</View>
</View>
<View style={{flexDirection:'column',justifyContent:'center',alignItems:'center',alignSelf:'center'}}>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-end',alignSelf:'flex-start',margin:10}}>
<View style={{backgroundColor:'white',borderRadius:10,flexDirection:'column',height:100, width:100}}></View>
</View>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-start',alignSelf:'flex-start',margin:10}}>
<View style={{backgroundColor:'white',borderRadius:10,flexDirection:'column',height:100, width:100}}></View>
</View>
</View>
<View style={{justifyContent:'center',alignItems:'center',alignSelf:'center', position:'absolute'}}>
<View style={{backgroundColor:'blue',
borderRadius:10,height:100, width:100, borderRadius:100/2}}></View>
</View>
</View>
Related
I was messing with my code and suddenly the ScrollView decided to disappear.
For some reason, the ScrollView works "properly" inside the Character bar View
but when it is inside of the base View it just isn't there.
export default class CharacterSheet extends Component {
render() {
return (
<View style={{flex:1}}>
<View style={styles.TopBar}>
<View>
</View>
</View>
<View style={{flex:1}}>
<View style={styles.CharacterBar}>
</View><View style={styles.Base}>
<ScrollView style={styles.scroll}>
<View style={{paddingTop:72}}>
<View style={styles.spellsBox}>
<Text>Hi</Text>
</View>
<View style={styles.spellsBox}>
<Text>e</Text>
</View>
<View style={styles.spellsBox}>
<Text>a</Text>
</View>
<View style={styles.spellsBox}>
<Text>Hi</Text>
</View>
<View style={styles.spellsBox}>
<Text>Hi</Text>
</View>
<View style={styles.spellsBox}>
<Text>Hi</Text>
</View>
</View>
</ScrollView>
</View>
<Animated.View style={styles.CharacterStatsBar}>
</Animated.View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
CharacterBar:{
height:72,
backgroundColor:'#242527'
},
CharacterStatsBar:{
position:'absolute',
top: 72,
left: 0,
right: 0,
height:72,
backgroundColor:'#404040',
borderBottomWidth:2,
borderBottomColor:'#c53131',
borderTopWidth:1,
borderTopColor:'#838383',
},
Base:{
flex:1,
backgroundColor:'#fff',
},
scroll:{
width:'95%',
alignSelf:'center'
},
spellsBox:{
height:80,
marginTop:10,
paddingVertical:10,
borderColor:'#777',
borderWidth:3,
justifyContent:'center'
}
});
I'm trying to run this in an android device
this problem is pretty annoying and is stressing me a little bit.
Try Like this , don't wrap ScrollView inside multiple Views.
<View style={{flex:1}}>
<View style={styles.TopBar}>
<View>
</View>
</View>
<ScrollView style={styles.scroll}>
<View style={{paddingTop:72}}>
<View style={styles.spellsBox}>
<Text>Hi</Text>
</View>
<View style={styles.spellsBox}>
<Text>e</Text>
</View>
<View style={styles.spellsBox}>
<Text>a</Text>
</View>
<View style={styles.spellsBox}>
<Text>Hi</Text>
</View>
<View style={styles.spellsBox}>
<Text>Hi</Text>
</View>
<View style={styles.spellsBox}>
<Text>byee</Text>
</View>
</View>
</ScrollView>
</View>
I just started learning how to use React Native and wanted to learn as I went while creating a simple project, I'm trying to create a ScrollView of card items but I can't seem to get it to scroll. I've been looking around stack overflow trying the solutions like flex:1 but I can't seem to get it to work.
Here is my code
<ScrollView contentContainerStyle={{flex:1}}>
<View style={{flexDirection:'row'}}>
<View style={{flex:0.5}}>
<View style={styles.card}><Text>Test</Text></View>
<View style={styles.card}><Text>Test2</Text></View>
<View style={styles.card}><Text>Test3</Text></View>
<View style={styles.card}><Text>Test4</Text></View>
<View style={styles.card}><Text>Test5</Text></View>
<View style={styles.card}><Text>Test6</Text></View>
<View style={styles.card}><Text>Test7</Text></View>
</View>
<View style={{flex:0.5}}>
<View style={styles.card}><Text>Testi</Text></View>
<View style={styles.card}><Text>Testii</Text></View>
<View style={styles.card}><Text>Testiii</Text></View>
<View style={styles.card}><Text>Testiv</Text></View>
<View style={styles.card}><Text>Testv</Text></View>
<View style={styles.card}><Text>Testvi</Text></View>
<View style={styles.card}><Text>Testvii</Text></View>
</View>
</View>
</ScrollView>
My CSS :
const styles = StyleSheet.create({
card:
{
height:'20%',
margin:10,
borderWidth:1,
borderColor:'#000',
borderStyle:'solid',
}
});
You have given flex 0.5 to both of the children views,
So here make sure that contents don't have fixed size in flex.
You can remove this 0.5 flex and give instead width:'50%' also remove flex:1 which is causing your scroll view to utilizing only viewable height.
<ScrollView>
<View style={{flexDirection:'row'}}>
<View style={{width:"50%"}}>
<View style={styles.card}><Text>Test</Text></View>
<View style={styles.card}><Text>Test2</Text></View>
<View style={styles.card}><Text>Test3</Text></View>
<View style={styles.card}><Text>Test4</Text></View>
<View style={styles.card}><Text>Test5</Text></View>
<View style={styles.card}><Text>Test6</Text></View>
<View style={styles.card}><Text>Test7</Text></View>
</View>
<View style={{width:"50%"}}>
<View style={styles.card}><Text>Testi</Text></View>
<View style={styles.card}><Text>Testii</Text></View>
<View style={styles.card}><Text>Testiii</Text></View>
<View style={styles.card}><Text>Testiv</Text></View>
<View style={styles.card}><Text>Testv</Text></View>
<View style={styles.card}><Text>Testvi</Text></View>
<View style={styles.card}><Text>Testvii</Text></View>
</View>
</View>
</ScrollView>
EDIT: also give height to card fixed instead of percentage because the view doesn't know what total size is so it cant calculate 20% exactly
see working eg. https://snack.expo.io/#jdgalani6297/scrolling-issue
Try below code:
<ScrollView style={{ flex: 1 }}>
<View style={{ flexDirection: 'row', flex: 1 }}>
<View style={{ flex: 0.5 }}>
<View style={styles.card}><Text>Test</Text></View>
<View style={styles.card}><Text>Test2</Text></View>
<View style={styles.card}><Text>Test3</Text></View>
<View style={styles.card}><Text>Test4</Text></View>
<View style={styles.card}><Text>Test5</Text></View>
<View style={styles.card}><Text>Test6</Text></View>
<View style={styles.card}><Text>Test7</Text></View>
</View>
<View style={{ flex: 0.5 }}>
<View style={styles.card}><Text>Testi</Text></View>
<View style={styles.card}><Text>Testii</Text></View>
<View style={styles.card}><Text>Testiii</Text></View>
<View style={styles.card}><Text>Testiv</Text></View>
<View style={styles.card}><Text>Testv</Text></View>
<View style={styles.card}><Text>Testvi</Text></View>
<View style={styles.card}><Text>Testvii</Text></View>
</View>
</View>
</ScrollView>
Card CSS:
NOTE : Don't forget to import Dimensions
card: {
height: (Dimensions.get('window').height * 0.20),
margin: 10,
borderWidth: 1,
borderColor: '#000',
borderStyle: 'solid',
}
render() {
return (
<View style ={styles.container}>
{/*for header*/}
<View style = {{flexDirection:'row',justifyContent:'space-between',alignItems: 'center',width:'100%',height:'09%',backgroundColor: '#009AFF'}}>
<TouchableWithoutFeedback onPress={() =>this.props.navigation.goBack()}>
<Image style={{width: 25, height: 25,margin:10}} source={require('../assets/clinic/left-arrow.png')} />
</TouchableWithoutFeedback>
<View>
<Text style={{fontSize: 21,fontWeight: 'bold', color: "white",paddingRight:25}}>Dummy</Text>
</View>
<View>
</View>
</View>
{/*for main content*/}
<ScrollView style={{width:'100%',height:'90%'}} contentContainerStyle={{ flexGrow: 1 }} nestedScrollEnabled={true}>
<View>
<View style = {{width:'100%',height:'45%',backgroundColor: '#009AFF',justifyContent:'center',alignItems: 'center'}}>
<Text style={{fontSize: 18,fontWeight: 'bold', color: "white",paddingRight:25}}>John Alison</Text>
</View>
<TouchableOpacity
style={styles.submitButton}>
<Text style={styles.submitText}>Update</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.submitButton}>
<Text style={styles.submitText}>Update</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.submitButton}>
<Text style={styles.submitText}>Update</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
)
}
Above code i have implemented in react native for learning purposes.But in above code ScrollView does not works,means it does not scrolls,why? i have tried many possible ways like setting flex and flexGrow equal to 1,enabling nested scrolling but it does not works.What is wrong with my code
I have the code below:
<ImageBackground style={{flex:1, width: null, height: null}} source={require('../img/bg.png')}>
<View style={{flex:1, backgroundColor:'red'}}>
</View>
<View style={{flex:1, backgroundColor:'yellow'}}>
<Text style={{fontSize:40}}>RESULTADOS</Text>
</View>
<View style={{flex:6, backgroundColor:'red'}}>
<ScrollView style={{flex:1, backgroundColor:'blue'}}>
<View style={{flex:1, backgroundColor:'white'}}>
//THIS NOT SHOW
</View>
<View style={{flex:1, backgroundColor:'green'}}>
//THIS NOT SHOW
</View>
</ScrollView>
</View>
</ImageBackground>
The View whit background color white and green is not showing on the screen.
Anybody help?
TheScrollView component has a special prop to set style for the content. It's the contentContainerStyle
Instead of using
<ScrollView style={{flex:1, backgroundColor:'blue'}}>
Just use
<ScrollView contentContainerStyle={{flex:1, backgroundColor:'blue'}}>
Click here to get more details.
With the following code:
<View style={{width:100,height:100,flexDirection:'row'}}>
<View style={{width:50, height:100}}>
a
</View>
<View style={{width:50, height:50}}>
b
</View>
<View style={{width:50, height:50}}>
c
</View>
</View>
--> I want to (IMAGE)
It is possible to do this with the "react-native-easy-grid" library.
However, it is possible to do this without using this library and with the above code structure. Without using rows and columns.
Can automatic placement be achieved by specifying only height and width values?
you can achieve this with flexbox:
<View style={{flex: 1, flexDirection:'row'}}>
<View style={{flex: 1, backgroundColor: 'red'}}>
<Text>a</Text>
</View>
<View style={{flex: 1, flexDirection:'column'}}>
<View style={{flex: 1, backgroundColor: 'green'}}>
<Text>b</Text>
</View>
<View style={{flex: 1, backgroundColor: 'blue'}}>
<Text>c</Text>
</View>
</View>
</View>