I am trying to create a day-view with times on the left side, and a top header of people. Currently I can get the left OR the top header to stick, but not both.
How do you get 2 sticky headers?
My render looks like this:
<ScrollView style={{height: 600}}>
<ScrollView horizontal={true}>
<View style={styles.column}>
<View style={{ flex: 1, flexDirection: 'row', width}}>
{header}
</View>
<View style={styles.row}>
<View style={[styles.container, { width, marginLeft: 40 }]}>
{this.generateRows()}
</View>
</View>
</View>
</ScrollView>
<View style={{backgroundColor: 'white', position: 'absolute', top: 0, bottom: 0, left: 0, }}>
<View style={{ flex: 1, flexDirection: 'row'}}>
<View style={styles.row}>
<Text></Text>
</View>
</View>
<View style={{height: 1000, width: 40 }}>
{this.generateRowLabels()}
</View>
</View>
</ScrollView>
Can you try changing the top-level ScrollView to View/FlexBox with flexDirection as 'column'? This will cause the inner ScrollViews to fit into the window size.
Related
I have a very basic styling question in react native
below is my code:
[![return (
<View style={{ flex: 1, backgroundColor: "blue" }}>
<ScrollView style={{ flex: 1, backgroundColor: "blue" }}>
<View style={{ flex: 1, backgroundColor: "red" }}>
<Text>Hello</Text>
</View>
<View style={{ flex: 1, backgroundColor: "orange" }}>
<Text>Hello</Text>
</View>
<View style={{ flex: 1, backgroundColor: "green" }}>
<Text>Hello</Text>
</View>
</ScrollView>
<ScrollView style={{ flex: 1, backgroundColor: "blue" }}>
<View style={{ flex: 1, backgroundColor: "red" }}>
<Text>Hello</Text>
</View>
<View style={{ flex: 1, backgroundColor: "orange" }}>
<Text>Hello</Text>
</View>
<View style={{ flex: 1, backgroundColor: "green" }}>
<Text>Hello</Text>
</View>
</ScrollView>
</View>
);
I just want to know why am I getting blue space between 2 ScrollVie? If I remove ScrollView then my flex property is working fine.
Change your ScrollView to:
<ScrollView
... other stuff
// Add here
contentContainerStyle={{
flex: 1 // or flexGrow: 1
}}
>
Issue on React Native repo
The styles you are passings to the ScrollView should be passed in the ScrollView Container
like this
<ScrollView
contentContainerStyle={{
flex: 1 // or flexGrow: 1
}}
> ... </ScrollView >
this can help you to understand
The reason is that you are giving flex:1 for the parent view So it takes a maximum screen height. And also the child ScrollViews has flex: 1. If you change the background color of the scroll view to some other color you can notice that it is the scrollView that is stretched and not the Parent View.
You can remove the flex property of the parent view so that your ScrollView will not be stretched to take up half the screen.
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',
}
Within a parent view, I would like to vertically center align one piece of text and have another at the bottom of the view.Whenever I add the bottom text, it shifts the position of the vertical centered view upwards (to make it the vertical center of the remaining space).
How do I keep the text vertically centered align relative to the parent view?
Update: I understand I can do this using {position: 'absolute',
bottom:0}, but want to understand the flex-box solution.
<View style={{height: 300, borderColor: "black", borderWidth: 1}}>
<View style={{ justifyContent: "center", flex: 1 }}>
<Text>Vert Middle</Text>
</View>
<View>
<Text>Vert Bottom</Text>
</View>
</View>
Just try below code
<View style={{height: 300, borderColor: "balck", borderWidth: 1}}>
<View style={{ backgroundColor: 'red', justifyContent: "center", flex: 1 }}>
<Text>Vert Middle</Text>
</View>
<View style={{position: 'absolute', bottom: 0}}> // Here is your updations
<Text>Vert Bottom</Text>
</View>
</View>
This is going to work for you. Also #Nitish answer is going to work too.
render() {
return (
<View style={{
height: 300,
borderColor: "black",
borderWidth: 1
}}>
<View style={{
justifyContent: "center",
flex: 1
}}>
<Text>Vert Middle</Text>
</View>
<View style={{
height:0, //Here...
justifyContent: "flex-end",
}}>
<Text>Vert Bottom</Text>
</View>
</View>
);
}
I searched how to set footer using React Native.
and I found a solution
https://stackoverflow.com/a/31249011/8226957
I followed and put style={{flex: 1}} to root View, but it does not work.
<View style={{flex: 1}}>
<ScrollView>
<FlatList
data={this.state.datas}
renderItem={({item}) =>
<TouchableOpacity onPress={() => {this._deleteKeyFromAsyncStorage(item.key)}}>
<Text style={styles.item}>
{item.value}
</Text>
</TouchableOpacity>
}
/>
</ScrollView>
<View>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
<TouchableOpacity onPress={this._onAddButton}>
<View style={{
height: 50,
backgroundColor: 'steelblue',
alignItems: 'center',
justifyContent: 'center',
}}>
<Text style={{textAlign: 'auto'}}>ADD</Text>
</View>
</TouchableOpacity>
</View>
</View>
when I follow that, I see disappeared List.
Try to add justifyContent : 'space-between' and add flexDirection: 'column' that should be fix your problem
<View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-between'}}>
Try to wrap the <ScrollView> in a <View style={{ flex: 1 }}>
If that does not work, try to set a fixed height too your footer: <View style={{ height: 90 }}>
I have added a dropdown and when I open it, the dropdown menu is hidden behind the views that have been added afterwards. How can I bring the dropdown view to front in react-native. I have now used an overlay and it brings the view to front but the view is not set in its normal location, instead it is displaying as the top most element.
In main render I have a listView:
<ListView ref='listView'
style = {{ backgroundColor: '#EAEAEC'}}
dataSource={this.state.dataSource}
automaticallyAdjustContentInsets={false}
renderRow={this.renderRow}/>
In render row of listView:
return (
<View style={{backgroundColor: '#FFF', marginBottom:5, shadowColor : '#BCBCBC', shadowOffset: {width: 0, height: 0}, shadowOpacity: 0.7, height:150}} >
<View style={{flex:1, flexDirection:'row',justifyContent: 'center', alignItems: 'center', backgroundColor: 'yellow', height:100}}>
<Overlay isVisible={true}><List /></Overlay>
</View>
<View style={{flex:5, flexDirection:'row',justifyContent: 'flex-end', alignItems: 'center', paddingTop:17, marginBottom:10}}>
<View style={{flex:1}}/>
<View style={{flex:1, alignItems: 'center'}}><Image style={styles.imageStyle} source={require('./audit_new_u.imageset/audit_new_u.png')} /></View>
<View style={{flex:1, alignItems: 'center'}}><Image style={styles.imageStyle} source={require('./audit_inProcess_u.imageset/audit_inProcess_u.png')} /></View>
<View style={{flex:1, alignItems: 'center'}}><Image style={styles.imageStyle} source={require('./audit_complete_s.imageset/audit_complete_s.png')} /></View>
<View style={{flex:1}}/>
</View>
</View>
);
Now the dropdown which is actually the List tag in render row which I have placed in overlay tags is now placed on top of the screen.
Add {zIndex: 999}
<View style={{zIndex: 999}}>
{...anything}
</View>
You have to make sure all the sub views inside your main view have a zIndex style property.
Like so:
const [myIndex, setMyIndex] = useState(1)
<View>
<View style={{zIndex: 3}}></View>
<View style={{zIndex: myIndex}}>
<Button onPress={() => setMyIndex(4)} title='Press to show above the other' />
</View>
<View style={{zIndex: 2}}></View>
</View>
Just add zIndex: -1 in the style of the view, you want to go behind in the hierarchy.
appActivityIndicatorOverlay: {
height: '100%',
width: '100%',
opacity: 0.8,
position: 'absolute',
elevation: (Platform.OS === 'android') ? 50 : 0,
backgroundColor: 'white',
color: theme.colors.brand.primary,
zIndex: 100
},