View is not showing on screen - react-native

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.

Related

How to align column of text in react native

How can I align a column of text to the right like the image below in react native? I have tried setting the textAlign to 'right' and setting alignSelf to 'flex-end', but it doesn't seem to be working.
Image

You can do like this:
<View style={{alignItems:'flex-end'}}>
<View style={{flex:1}}>
<Text>TOTAL</Text>
</View>
<View style={{flex:1}}>
<Text>100</Text>
</View>
<View style={{flex:1}}>
<Text>200</Text>
</View>
<View style={{flex:1}}>
<Text>300</Text>
</View>
<View style={{flex:1}}>
<Text>400</Text>
</View>
<View style={{flex:1}}>
<Text>500</Text>
</View>
</View>
The alignItems property in Flexbox only works when the items has the flex property.
Check the documentation here: https://reactnative.dev/docs/flexbox#align-items
Result:

ScrollView isn't appering

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>

Scrollview inside another view does not works in react native

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

modal not open in react-native android

I am Developing react-native Android Sample App. Firstly I Created One Page inside Tab bar Bottom On Page ... In TabBar Contains OneTabPage have contains open Two Modals ( one Is Using Edit and another Date showing to modal's custom Desing) modal and one Button has EditButton when i was click on editIcon show Modal it's working fine iOS. But in android when i was go to click on next tab and come back to current Page it's not working Modal means not Open(android).
I am following refer this link : https://github.com/bodyflex/react-native-simple-modal
This is my Code:
<Modal
open={this.state.open}
offset={0}
animationDuration={200}
animationTension={40}
open={this.state.open}
closeOnTouchOutside={true}
modalDidOpen={() => console.log('modal did open')}
modalDidClose={() => this.setState({open: false})}
style={{flexGrow: 1,
height:windowSize.height/2.5}}>
<View style={styles.modelView}>
<View style={{flex:.25, justifyContent:'center', alignItems:'center'}}>
<Text style={{fontSize:16, fontWeight:'bold',textAlign:'center', color:'black'}}>
{this.state.product_title}
</Text>
</View>
<View style={{flex:.35, justifyContent:'center', alignItems:'center'}}>
<View style={styles.modelIncDecButton}>
<TouchableOpacity style={{flex:.15, justifyContent:'space-around', alignItems:'center'}} onPress={this.decrementMethode.bind(this)}>
<Image style={styles.incrementDecrementIcon} source={require('#images/decrementIcon.png')} />
</TouchableOpacity>
<View style={{flex:.05, justifyContent:'center', alignItems:'center'}}>
<Text style={{fontSize:16, fontWeight:'bold',textAlign:'center',color:'black'}}>
{this.state.product_quantity}
</Text>
</View>
<TouchableOpacity style={{flex:.15, justifyContent:'space-around', alignItems:'center'}} onPress={this.incrementMethode.bind(this)}>
<Image style={styles.incrementDecrementIcon} source={require('#images/incrementIcon.png')} />
</TouchableOpacity>
</View>
</View>
<View style={{flex:.15, justifyContent:'center', alignItems:'center'}}>
<Text style={{fontSize:16, fontWeight:'bold',textAlign:'center',color:'black'}}>
£ {(Math.floor(this.state.product_total * 100) / 100).toFixed(2)}
</Text>
</View>
<View style={{flex:.25, justifyContent:'center', alignItems:'center'}}>
<TouchableOpacity style={styles.updateButton} onPress={this.updateMethode.bind(this)}>
<Text style={styles.updateButtonText}>
Update
</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
the above code based i am following this link :
enter link description here
Thans in Advance

How to overlap in react-native

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>