Develop Reference

TextInput not showing on focus

I have a text input named email or user name when i click on it, it doesn't show the values I type,I think it's because of the screen size, is there anyway I can adjust the Textinput so that when I click on it, the full text input show and I can see my values typed.
The other text inputs underneath it shows, but it doesn't show, should i wrap it in a scrollview, please any help will be nice, Thanks.
This is the page
when i click on email or username
wrapping the view in a scroll view brings this
MY CODE
<View style={{
height: 42, width: 72,
backgroundColor: '#EFB879', marginTop: '15.15%',
alignSelf: 'center'
}}>
<Text style={{
fontFamily: 'mont-bold',
fontSize: 34,
color: '#fff'
}}>
sẹlẹ
</Text>
</View>
<View style={{
width: '83.33%',
height: this.state.visible? 240 : 180,
backgroundColor: '#fff',
position: 'absolute',
bottom: 0,
alignSelf: 'center',
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
}}>
<View style={{
width: '100%',
height: 60,
backgroundColor: '#fff',
borderBottomWidth: 0.7,
borderColor: '#d9d8d8',
borderTopRightRadius: 6,
borderTopLeftRadius: 6,
}}>
<TextInput placeholder="Email or mobile number"
placeholderStyle={{fontSize: 14, fontFamily: 'mont'}}
placeholderTextColor="#615D5D"
underlineColorAndroid={'transparent'}
style={{
alignSelf: 'center',
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
width: '85%',
paddingLeft: 0,
padding: 4,
backgroundColor: '#fff',
fontSize: 14, fontFamily: 'mont', color: '#615D5D',
}}/>
</View>
<View style={{
width: '100%',
height: 60,
backgroundColor: '#fff',
borderBottomWidth: 0.7,
borderColor: '#d9d8d8',
}}>
<TextInput placeholder={picked}
value={this.state.text}
onChangeText={(text) => this.handleChange(text)}
onFocus={() => this.setState({visible: true})}
onBlur={() => this.setState({visible: false})}
placeholderStyle={{fontSize: 14, fontFamily: 'mont'}}
placeholderTextColor="#615D5D"
underlineColorAndroid={'transparent'}
style={{
alignSelf: 'center',
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
width: '85%',
paddingLeft: 0,
padding: 4,
backgroundColor: '#fff',
fontSize: 14, fontFamily: 'mont', color: '#615D5D',
}}
contextMenuHidden={true}/>
</View>
{this.state.visible ? <View style={{
justifyContent: 'flex-end',
height: 200,
width: '100%',
}}>
<Text style={styles.textHead}>
Select your Institute
</Text>
{view}
</View> : <View hide={true} style={{
width: '100%',
height: 60,
backgroundColor: '#fff',
justifyContent: 'center'
}}>
<TextInput placeholder="Password"
placeholderStyle={{fontSize: 14, fontFamily: 'mont'}}
placeholderTextColor="#615D5D"
underlineColorAndroid={'transparent'}
secureTextEntry={true}
style={{
alignSelf: 'center',
flex: 1,
paddingTop: 10,
paddingRight: 25,
paddingBottom: 10,
width: '85%',
paddingLeft: 0,
padding: 4,
backgroundColor: '#fff',
fontSize: 14, fontFamily: 'mont', color: '#615D5D',
}}/><View style={{
width: 18, height: 11,
position: 'absolute', right: 25
}}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('../eye.png')}/>
</View>
</View>}
</View>
</View>
<View style={{
width: '83.36%',
height: 60,
backgroundColor: '#EFB879',
alignSelf: 'center',
justifyContent: 'center',
alignItems: 'center',
borderBottomRightRadius: 6,
borderBottomLeftRadius: 6,
}}>
<Text style={{
fontFamily: 'mont-semi',
fontSize: 16,
color: '#fff'
}}>
SIGN UP
</Text>
</View>
<View
style={{
height: 0,
width: 120,
borderBottomWidth: 1.2,
borderColor: '#d9d8d8',
alignSelf: 'center',
marginTop: '50%'
}}>
</View>
<View style={{width: '100%',
height: 2,flexDirection: 'row',
// alignSelf: 'center',
justifyContent: 'center',
marginTop: '5%'}}>
<Text style={{
color: '#615D5D',
fontFamily: 'mont-medium',
fontSize: 14,
alignSelf: 'center',
}}>
Already have an account? </Text>
<TouchableNativeFeedback
onPressIn={() => this.setState({pressed: !this.state.pressed})}
onPressOut={() => this.setState({pressed: !this.state.pressed})}
onPress={this.onP.bind(this)}>
<Text
style={{
color: '#EFB779',
fontFamily: 'mont-medium',
fontSize: this.state.pressed? 16: 14,
alignSelf: 'center',}}>
SIGN IN
</Text>
</TouchableNativeFeedback>
</View>
</View>

This works to me:
Use the Keyboard API from React Native to set listeners on keyboard.
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
Use a state variable to set scrollEnabled prop of the ScrollView (that wrap your content) to true or false according to the keyboard is shown or not. So when the keyboard is shown the scroll will be enabled.
At the bottom of your content add a conditional View with some height that is active when the keyboard is shown thus you will be able to scroll.
Remember this:
componentWillUnmount () {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}

Place your entire code inside ScrollView and use fixed positions for your views. Try it.

There is no onchangetext() event in first and last textInput.try to add it in your code.
constructor(props) {
super(props);
this.state = { email:'',text:'',password:'' };
}
...
<TextInput
onChangeText={(email) => this.setState({email})}
value={this.state.email}
/>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(password) => this.setState({password})}
value={this.state.password}
/>
i hope this helps you

View goes hidden when status bar is set

I have a component it has a view of flex: 1 with a status bar component and a child component, when the status bar element isn't there the indicator shows, but when I add the status bar element, the indicator goes hidden, Please how can i make the indicator show while the status bar is added, what is making it go hidden
With the StatusBar(The indicator goes hidden)
Without the StatusBar(The Indicator shows)
THE CODE
CHILD COMPONENT(On)
import {BoxShadow} from 'react-native-shadow';
export default class On extends Component {
render() {
const shadowOpt = {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height / 10,
color: "#000",
border: 10,
opacity: '0.15',
radius: 20,
x: 0,
y: 5,
}
const dimensions = Dimensions.get('window');
const Height = (dimensions.height);
const Width = dimensions.width;
return (
<View style={{flex: 1}}><View name="indicator" style={{flexDirection: 'row',}}>
<View style={{backgroundColor: '#cbcdda', width: Width, height: Height / 60}}>
</View>
<View style={{
backgroundColor: '#EFB879',
width: (this.state.width),
height: Height / 60,
position: 'absolute'
}}>
</View>
</View>
<ViewPagerAndroid
onPageSelected={this.onPageSelected.bind(this)}
ref={(viewPager) => {
this.viewPager = viewPager
}}
style={{height: Height - ((Height / 30) + (Height / 10))}}
initialPage={0}>
<View style={{
backgroundColor: 'white',
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'center',
flexDirection: 'column'
}} key="1">
<Image style={{marginBottom: 50,}} source={require('../on1.png')}/>
<Text style={{
fontFamily: 'mont',
color: '#000',
fontSize: 22,
letterSpacing: 0.5,
marginBottom: 12
}}>
Welcome to Sẹlẹ
</Text>
<Text style={{
fontFamily: 'mont',
color: '#615D5D',
fontSize: 16,
letterSpacing: 1,
textAlign: 'center'
}}>
Hire services and buy and sell {'\n'} on Sẹlẹ
</Text>
</View>
<View style={{
backgroundColor: 'white',
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'center',
flexDirection: 'column'
}} key="2">
<Image style={{marginBottom: 50, width: '35%', height: '35%'}}
source={require('../sele2.png')}/>
<Text style={{
fontFamily: 'mont',
color: '#000',
fontSize: 22,
letterSpacing: 0.5,
marginBottom: 12
}}>
With Sẹlẹ, you can
</Text>
<Text style={{
fontFamily: 'mont',
color: '#615D5D',
fontSize: 16,
letterSpacing: 1,
textAlign: 'center'
}}>
Hire services and buy and sell {'\n'} on Sẹlẹ
</Text>
</View>
<View style={{
backgroundColor: 'white',
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'center',
flexDirection: 'column'
}} key="3">
<Text style={{
fontFamily: 'mont',
color: '#000',
fontSize: 22,
letterSpacing: 0.5,
marginBottom: 12
}}>
Select your School
</Text>
<Text style={{
fontFamily: 'mont',
color: '#615D5D',
fontSize: 16,
letterSpacing: 1,
textAlign: 'center'
}}>
You've made it this far {'\n'} select your school on the next page {'\n'} and let's get
started
</Text>
</View>
</ViewPagerAndroid>
<BoxShadow setting={shadowOpt}>
<View style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
flex: 1,
backgroundColor: 'white',
}}>
<TouchableNativeFeedback>
<Text style={{
fontSize: 18,
marginLeft: 25,
fontFamily: 'mont',
color: '#615D5D',
marginBottom: 10
}}>Skip</Text>
</TouchableNativeFeedback>
<View style={{flexDirection: 'row'}}><View
style={{marginRight: 14, alignSelf: 'center'}}>
<View style={this.state.no == "0" ? styles.selected : styles.unselected}>
</View>
</View>
<View style={{marginRight: 14}}>
<View
style={this.state.no == "1" ? styles.selected : styles.unselected}>
</View>
</View>
<View
style={this.state.no == "2" ? styles.selected : styles.unselected}>
</View></View>
<TouchableNativeFeedback onPress={this.update.bind(this)}>
<Text style={{
fontFamily: 'mont',
color: '#EFB879',
fontSize: 18,
marginRight: 25,
marginBottom: 10
}}>Next</Text>
</TouchableNativeFeedback>
</View>
</BoxShadow>
</View>
);
}
}
PARENT ELEMENT
export default class Parent extends Component {
constructor(props) {
super(props);
this.state = {
timePassed: false,
};
}
render() {
return (
<View style={{flex: 1}}>
<StatusBar backgroundColor='#EE8F62' translucent={true} barStyle='light-content'/><On/>
</View>
);
}
}

We had similar problem for android, This is how we handle it was, may be this will help you to find a better solution.
You need to create a const and assign status bar size as a value.
const NAVBAR_HEIGHT = Platform.select({
ios: { marginTop: 0 },
android: { marginTop: window.height / 8 }
});
Then in the style section should add this line,
marginTop: NAVBAR_HEIGHT.marginTop
Like this,
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#E7EBF0",
marginTop: NAVBAR_HEIGHT.marginTop
}
});
This is how we create status bar for our application,
<View style={styles.container}>
{/* if ios status bar will be added to the screen */}
{Platform.OS === "ios" ? (
<Statusbar backgroundColor="#000000" barStyle="light-content" />
) : null}
</View>

"malformed calls from JS field sizes are different" error on Android - react-native

I'm using React-Native.I'm living trouble with Picker component on Android. I use Picker from Native-Base Library.
Here is my Picker code with it's parent view.
<View style={{height: 40, marginTop: 20}}>
<Label style={{fontWeight: 'bold', color: '#d7d7d7'}}>Phone</Label>
<View style={{flexDirection: 'row',width: '100%',borderWidth: 1, borderColor: '#d7d7d7', height: 40}}>
<View style={{flexDirection: 'row',width: '30%', height: '100%' ,backgroundColor: '#d7d7d7', alignItems: 'center'}}>
<Picker style={{width: 100, height: '100%', marginLeft: 5}}
selectedValue={this.state.selectedCountry}
onValueChange={(value)=>this.onCodeChanged(value)}>
<Picker.Item label={<Text style={{alignItems: 'center', flexDirection: 'row'}}>
<Thumbnail square style={{width: 30, height: 20, marginTop: 5}} source={require('../assets/+90.png')}/> +90</Text>} value="+90"/>
<Picker.Item label={<Text style={{alignItems: 'center', flexDirection: 'row'}}>
<Thumbnail square style={{width: 30, height: 20, marginTop: 5}} source={require('../assets/+44.png')}/> +44</Text>} value="+44"/>
<Picker.Item label={<Text style={{alignItems: 'center', flexDirection: 'row'}}>
<Thumbnail square style={{width: 30, height: 20, marginTop: 5}} source={require('../assets/+1.png')}/> +1</Text>} value="+1"/>
</Picker>
</View>
<Input keyboardType={'numeric'} style={{width: '70%', height: '100%'}} value={this.state.phone} onChangeText={(value)=>this.setState({phone: value},()=>console.log("Phone State: ", this.state.phone))}/>
</View>
</View>
Here is how Picker looks like in IOS
And here is the error screen I get on android.
It seems the problem is Picker.Item's Labelcontent. When I changed the content of label from Text to usual, ordinary string, it works fine on android, as well. But, somehow I need the flag and code together in Picker.Item
I hope there is someone who faced & handled this issue before.

React Native image and other components does not respect bounds (Such as padding)

I have recently started using React-Native, and one of the main issues I have been struggling with is the layout design.
I have a "Card" like component that holds some information about movies. Components like Image and Text that are big goes out of the bounds of the card and does not respect the padding and margins provided.
Here is the JSX code:
<View style={[styles.container, styles.card]}>
<View style={{alignSelf: 'stretch', flexDirection: 'row', padding: 10}}>
<Image style={{height: 50, width: 50, borderRadius: 25}}
source={require('../../img/sarah-avatar.png.jpeg')}/>
<View style={{flexDirection: 'column', marginTop: 5, marginLeft: 15}}>
<Text style={styles.title}>{ this.state.movie.name }</Text>
<Text style={{color: 'gray'}}>{ moment(this.state.movie.releaseDate).format('DD/MM/YYYY') }</Text>
</View>
</View>
<View style={{alignItems: 'center'}}>
<!-- THIS IMAGE DOES NOT RESPECT THE CARD BOUNDS -->
<Image style={{height: 220, resizeMode: 'center'}}
source={require('../../img/advance-card-bttf.png')}/>
<View style={{flexWrap: 'wrap', marginTop: 10, marginBottom: 20}}>
<Text style={{color: 'gray', fontSize: 14}}>
{ this.state.movie.summary }
</Text>
</View>
</View>
<View style={{flexDirection: 'row', flex: 1}}>
<Button onPress={this.onLikeClick.bind(this)}>
<View style={{flexDirection: 'row'}}>
<Icon name="thumbs-up" size={18} color="#007aff" />
<Text style={{color: '#007aff', marginLeft: 5}}>{ this.state.movie.likes } Likes</Text>
</View>
</Button>
<View style={{width: 20}} />
<Button onPress={this.onCommentClick.bind(this)}>
<View style={{flexDirection: 'row'}}>
<Icon name="comment" size={18} color="#007aff" />
<Text style={{color: '#007aff', marginLeft: 5}}>{ this.state.movie.comments.length } Comments</Text>
</View>
</Button>
</View>
<Comments comments={this.state.movie.comments }
showComments={ this.state.showComments }
handler={this.handler} />
</View>
const styles = StyleSheet.create({
card: {
backgroundColor: "#fff",
borderRadius: 2,
shadowColor: "#000000",
shadowOpacity: 0.3,
shadowRadius: 1,
shadowOffset: {
height: 1,
width: 0.3,
},
padding: 10,
flexWrap: 'wrap'
},
container: {
flex: 1,
backgroundColor: '#F5FCFF',
margin: 5
},
title: {
fontSize: 20,
backgroundColor: 'transparent'
},
button: {
marginRight: 10
}
});
And the comments component JSX code:
<View style={{flexDirection: 'column'}}>
{
this.props.comments.map((comment, index) => {
return (
<View key={index} style={{flexDirection: 'row', marginTop: 20}}>
<Image style={{height: 50, width: 50, borderRadius: 25}}
source={require('../../img/avatar-ts-woody.png')}/>
<View style={{flexDirection: 'column', marginLeft: 15, marginTop: 3}}>
<Text style={{fontSize: 18}}>{ comment.name }</Text>
<!-- THE COMMENT CONTENT GOES OUTSIDE OF THE CARD -->
<Text style={{color: 'gray'}}>{ comment.content }</Text>
</View>
</View>
)
})
}
<TextInput placeholder="Leave a comment"
value={this.state.commentContent}
onChangeText={(text) => this.setState({commentContent : text})}
onSubmitEditing={this.onCommentEntered.bind(this)}
style={{height: 40, marginTop: 18}} />
</View>
Here you can see that the cover image seems like it's out of the card:
In here each comment might start correctly inside the card, but will go outside of the bounds when text is too long:

how to bring ProgressBar in center of the screen and remove warning message in react native

how to bring the progress bar to the center of the screen like we do in android center in parent in relative layout and how to remove the warning message.How to change the visibility(invisible or gone or visible) in progressbar.
MyScreen
var ProgressBar = require('ProgressBarAndroid');
<View style={{ flex: 1, backgroundColor: 'steelblue', padding: 10, justifyContent: 'center' }}>
<Text style={{
backgroundColor: 'steelblue', justifyContent: 'center', alignItems: 'center', fontSize: 40, textAlign: 'center',
color: 'white', marginBottom: 30
}}>LOGIN</Text>
<ProgressBar style={{justifyContent:'center',alignItems:'center',styleAttr:'LargeInverse', color:'white'}} />
<View style={{ justifyContent: 'center' }}>
<TextInput
style={{ height: 50, marginLeft: 30, marginRight: 30, marginBottom: 20, color: 'white', fontSize: 20 }}
placeholder='Username' placeholderTextColor='white'
autoFocus={true}
returnKeyType='next'
keyboardType='email-address'
onChangeText={(valUsername) => _values.username = valUsername}
/>
<TextInput
secureTextEntry={true}
style={{ height: 50, marginLeft: 30, marginRight: 30, marginBottom: 20, color: 'white', fontSize: 20 }}
placeholder='Password' placeholderTextColor='white'
onChangeText={(valPassword) => _values.password = valPassword}
/>
</View>
<Button onPress={() => { _handlePress() } } label='Login' />
<View>
<Text style={{ color: 'white', justifyContent: 'center', textAlign: 'center', alignItems: 'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: 'solid' }}>
Forgot Password
</Text>
<Text style={{ color: 'white', marginTop: 10, justifyContent: 'center', textAlign: 'center', alignItems: 'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: 'solid' }}>
SignUp
</Text>
</View>
</View>

As noted by #ravi-teja, use absolute positioning. Also, your warning arises because styleAttr is not a style attribute (the name is misleading) but a prop. You can also show and hide it programmatically using a boolean (myCondition) (that you can maybe store in your state). You should do something like this:
var ProgressBar = require('ProgressBarAndroid');
// ...
render(){
const {width, heigth} = Dimensions.get('window'); // The dimensions may change due to the device being rotated, so you need to get them in each render.
return (
//...
{this.state.myCondition && <ProgressBar styleAttr={'LargeInverse'} style={{position: 'absolute', left: width/2, height: height/2, justifyContent:'center',alignItems:'center', color:'white'}} />}
//...
}
In addition to that and as others said, you should give a try to ActivityIndicator, since it works for both iOS and Android.