ScrollView isn't appering - react-native

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>

Related

rngesturehandlermodule.attach gesture handler got 2 arguments expected 3

When using the following code this error occurs:
rngesturehandlermodule.attach gesture handler got 2 arguments expected 3
Code:
import React from 'react';
import {Text, View, StyleSheet, Image } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler'
export default class App extends React.Component{
render(){
return(
<View style={styles.container}>
<Image
style={{width:'100%', height:400}}
source={require('./assets/Login.png')}
resizeMode='cover' />
<Text style={{fontSize:30, fontWeight:'bold'}}>Hello User!</Text>
<Text style={{color:'gray', marginHorizontal:20, fontSize:10,textAlign:'center'}}> Welcome To The My Application I Am A Naqeeb Rajput The Developer Of The React Native</Text>
<View style={{flexDirection:'row', paddingVertical:20, margin:20}}>
<TouchableOpacity
onPress={()=>this.props.navigation.navigate('Login')}
style={{
width:100,
backgroundColor:'#0d47a1',
padding:10,
borderRadius:30,
marginVertical:1
}}>
<Text style={{color:'white', textAlign:'center'}}>Login</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
width:100,
backgroundColor:'#e3f2fd',
padding:10,
borderRadius:30,
marginVertical:1
}}>
<Text style={{color:'black', textAlign:'center'}}>Sign Up</Text>
</TouchableOpacity>
</View>
<Text style={{fontSize:16, marginTop:7}}>Or via Social</Text>
<View style={{flexDirection:'row'}}>
<View
style={{justifyContent:'center', width:40, height:40, borderRadius:40/2, backgroundColor:'#283593', alignItems:'center'}}>
<Text
style={{color:'white', alignItems:'center', fontSize:15 , fontWeight:'bold'}}>f</Text>
</View>
<View
style={{justifyContent:'center', width:40, height:40, borderRadius:40/2, backgroundColor:'#b71c1c', alignItems:'center'}}>
<Text
style={{color:'white', alignItems:'center', fontSize:15, fontWeight:'bold'}}>g</Text>
</View>
<View
style={{justifyContent:'center', width:40, height:40, borderRadius:40/2, backgroundColor:'#311b92', alignItems:'center'}}>
<Text
style={{color:'white', alignItems:'center', fontSize:15, fontWeight:'bold'}}>In</Text>
</View>
</View>
</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

View is not showing on screen

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.

react-native add '...' on the right of card to show more information

I'm trying to add the 3 littles dots on the right of a card to show more information on click but cannot find how this is called.
On android it is called ""overflow menu" but the only component using overflow I found is "toolbarAndroid". I cannot use it because i work on Android & IOS.
Did you know how to do this ?
Actually i'm using "react-native-elements" for the card but they don't provide this option.
Maybe i have to create a component for that
My actual code, not using "title" props of card because i don't want to display the divider line.
renderProject(project) {
const { id, name, description, species, images } = project;
return (
<Card containerStyle={thisstyles.cardContainerStyle} key={id}>
<View>
<Text style={thisstyles.projectName}>{name}</Text>
</View>
<View style={{marginLeft:15}}>
<Text style={{color:'mediumvioletred'}}>{description}</Text>
<Text>
{species} Espèces {images} Images
</Text>
</View>
</Card>
);
}
As you have used custom component just add Image to show triple dots.
<View>
<Text style={thisstyles.projectName}>{name}</Text>
<Image style={position: 'absolute', right: 0}
source={require('../../path/to/image')} />
</View>
In your given module react-native-elements,
<Card
title='HELLO WORLD'
image={require('../images/pic2.jpg')}> // you can play around with this
You can Crate Your component Like this without any image
import React, {Component} from 'react';
import {View,TouchableOpacity} from 'react-native';
import {Text,Header,CardItem} from 'native-base';
class CardExample extends Component{
_renderSearchResult(){
return(
<View>
<CardItem style={styles.cardView}>
<View style={{flex:1}}>
<View style={styles.locationRowContainer}>
<View style={styles.addressContainer}>
<Text style={styles.locationText}>
My current location
</Text>
</View>
<TouchableOpacity onPress={()=>{alert('You cliked me')}}>
<View>
<View style={styles.circleDot}>
</View>
<View style={styles.circleDot}>
</View>
<View style={styles.circleDot}>
</View>
</View>
</TouchableOpacity>
</View>
</View>
</CardItem>
<CardItem style={styles.cardView}>
<View style={{flex:1}}>
<View style={styles.locationRowContainer}>
<View style={styles.addressContainer}>
<Text style={styles.locationText}>
My current location
</Text>
</View>
<TouchableOpacity onPress={()=>{alert('You cliked me')}}>
<View>
<View style={styles.circleDot}>
</View>
<View style={styles.circleDot}>
</View>
<View style={styles.circleDot}>
</View>
</View>
</TouchableOpacity>
</View>
</View>
</CardItem>
</View>
)
}
render(){
return(
<View style={styles.container}>
{this._renderSearchResult()}
</View>
)
}
}
const styles={
container:{
flex:1,
},
cardView:{
elevation:5,
marginTop:8,
},
locationRowContainer:{
flexDirection:'row',
marginTop:21,
},
addressContainer:{
flex:3,
justifyContent:'center',
alignItems:'flex-start'
},
locationText:{
fontSize:16,
color:'black'
},
circleDot:{
backgroundColor:'black',
height:6,
width:6,
borderRadius:6/2,
marginBottom:2,
},
mapLocationContainer:{
flex:1,
justifyContent:'center',
alignItems:'flex-end'
}
}
export default CardExample;

Getting design issues when the device is in PORTRAIT UPSIDEDOWN in React native

I'm working on React native project, My issue is when I try to change the orientation from LANDSCAPE to PORTRAIT getting some design issues especially when the device is turned to PORTRAIT UPSIDEDOWN from LANDSCAPE.
Here Is My Code:
class Exm extends Component {
constructor() {
super();
const init = Orientation.getInitialOrientation();
this.state = {
init,
or: init,
sor: init,
emailId: '',
password:'',
Token:'',
orientation:'',
Spinner:false,
userId:null,
isDisabled:false
};
this._updateOrientation = this._updateOrientation.bind(this);
Orientation.addOrientationListener(this._updateOrientation);
this._updateSpecificOrientation = this._updateSpecificOrientation.bind(this);
Orientation.addSpecificOrientationListener(this._updateSpecificOrientation);
}
_updateOrientation(or) {
// alert("HI")
this.setState({ or });
}
_updateSpecificOrientation(sor) {
//alert("HELLO")
this.setState({ sor });
}
render() {
console.log("Type Of Orientation:"+this.state.init+','+this.state.or+','+this.state.sor);
const { init, or, sor} = this.state;
return (
<View style={styles.container}>
{this.state.sor=="PORTRAIT" ?(
<View style={{flex:1}}>
<Image style={{width:windowSize.width,height:windowSize.height,resizeMode:'cover'}} source={require('./../images/home.png')}>
<View style={{flex:1}}>
<View style={{flex:0.5,justifyContent:"flex-end"}}>
<Text style={{backgroundColor:"transparent",fontSize:17,color:"white",fontWeight:'500',textAlign:'center',marginBottom:45}}>Finest Wines Direct from Sonoma</Text>
<TouchableOpacity onPress={this.onClick.bind(this)}>
<View style={styles.button1}>
<Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>BROWSE WEBSITE</Text>
</View>
</TouchableOpacity>
</View>
<View style={{flex:0.5}}>
<TouchableOpacity onPress={this.onClick1.bind(this)}>
<View style={styles.button}>
<Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>DAILY DEALS</Text>
</View>
</TouchableOpacity>
</View>
</View>
</Image>
</View>
):
this.state.sor=="UNKNOWN" ? (
<View style={{flex:1}}>
<Image style={{width:windowSize.width,height:windowSize.height,resizeMode:'cover'}} source={require('./../images/home.png')}>
<View style={{flex:1}}>
<View style={{flex:0.5,justifyContent:"flex-end"}}>
<Text style={{backgroundColor:"transparent",fontSize:17,color:"white",fontWeight:'500',textAlign:'center',marginBottom:45}}>Finest Wines Direct from Sonoma</Text>
<TouchableOpacity onPress={this.onClick.bind(this)}>
<View style={styles.button1}>
<Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>BROWSE WEBSITE</Text>
</View>
</TouchableOpacity>
</View>
<View style={{flex:0.5}}>
<TouchableOpacity onPress={this.onClick1.bind(this)}>
<View style={styles.button}>
<Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>DAILY DEALS</Text>
</View>
</TouchableOpacity>
</View>
</View>
</Image>
</View>
):this.state.sor=="LANDSCAPEUPSIDEDOWN" ? (
<View style={{flex:1}}>
<Image style={{width:windowSize.height,height:windowSize.width}} source={require('./../images/home_landscape.png')}>
<View style={{flex:1}}>
<View style={{flex:0.5,justifyContent:"flex-end"}}>
<Text style={{backgroundColor:"transparent",fontSize:17,color:"white",fontWeight:'500',textAlign:'center',marginBottom:45}}>Finest Wines Direct from Sonoma</Text>
<TouchableOpacity onPress={this.onClick.bind(this)}>
<View style={styles.button1}>
<Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>BROWSE WEBSITE</Text>
</View>
</TouchableOpacity>
</View>
<View style={{flex:0.5}}>
<TouchableOpacity onPress={this.onClick1.bind(this)}>
<View style={styles.button}>
<Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>DAILY DEALS</Text>
</View>
</TouchableOpacity>
</View>
</View>
</Image>
</View>
):
<View style={{flex:1}}>
<Image style={{width:windowSize.height,height:windowSize.width}} source={require('./../images/home_landscape.png')}>
<View style={{flex:1}}>
<View style={{flex:0.5,justifyContent:"flex-end"}}>
<Text style={{backgroundColor:"transparent",fontSize:17,color:"white",fontWeight:'500',textAlign:'center',marginBottom:45}}>Finest Wines Direct from Sonoma</Text>
<TouchableOpacity onPress={this.onClick.bind(this)}>
<View style={styles.button1}>
<Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>BROWSE WEBSITE</Text>
</View>
</TouchableOpacity>
</View>
<View style={{flex:0.5}}>
<TouchableOpacity onPress={this.onClick1.bind(this)}>
<View style={styles.button}>
<Text style={{fontSize:18,color:"white",fontWeight:"bold",textAlign:'center'}}>DAILY DEALS</Text>
</View>
</TouchableOpacity>
</View>
</View>
</Image>
</View>
}
</View>
);
}
}
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'#f5f5f5'
},
button:{
height: 55,
backgroundColor: 'transparent',
borderColor: 'white',
borderWidth: 2,
marginRight:50,
marginLeft:50,
marginTop: 20,
marginBottom:5,
justifyContent:'center',
alignSelf:'stretch',
},
button1:{
height: 55,
backgroundColor: 'transparent',
borderColor: 'white',
borderWidth: 2,
marginRight:50,
marginLeft:50,
marginBottom:5,
justifyContent:'center',
alignSelf:'stretch',
},
buttonText:{
fontSize: 18,
marginTop:5,
marginBottom:5,
textAlign:'center',
color:'white',
textAlignVertical:'center',
},
});
module.exports = Exm;
ScreenShots Here.
Please give me suggestions to solve this issue, Any help much appreciated
Ef.png
Seems like the Module is not updated with ES6 Syntax. Here is a Sample Code you can make use of. Demo
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import OrientationModule from 'react-native-orientation'
class Example extends Component {
constructor() {
super();
this.state = {
orientationStatus: 'PORTRAIT'
};
}
componentWillMount(){
var Orientation = OrientationModule.getInitialOrientation()
this.setState({
Orientation: Orientation
})
}
_orientationDidChange = (orientationStatus) => {
this.setState({orientationStatus})
}
componentDidMount(){
// Add a Listener, every time Orientation changes this method triggers
OrientationModule.addOrientationListener(this._orientationDidChange);
}
componentWillUnmount(){
// Remove the Listener, to avoid setting a State while component was unmounted
OrientationModule.removeOrientationListener(this._orientationDidChange);
}
render() {
// You can Have your Design Logic here
return (
<View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
<Text>{this.state.orientationStatus}</Text>
</View>
)
}
}
module.exports = Example
Why are you doing this in first place, just write component w/o any orientation code and it should rotate automatically. Then if you need some layout adjustments do those like width/height or just check flexbox model more maybe it's already have what you need, while react native mimics flexbox. Can't tell from your description what issue you face.
Also if you want to disable some orientations, it can be done in project config
Android
Android - disable landscape mode?
iOS https://stackoverflow.com/a/24205653/1737158