I have a Register Component that has PhoneInput Component from the external library https://github.com/thegamenicorus/react-native-phone-input The problem is I want to execute some code as soon as TextField inside the PhoneInput is Focused.
While checking the documentation of the library. I saw a property called the textComponent. Can that be used for onFocus of the text field present in PhoneInput Component
import React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import PhoneInput from 'react-native-phone-input'
export default class Register extends React.Component {
constructor(props){
super(props);
this.state = {"phone": ""};
this.countriesList = [
{
"name": "India (भारत)",
"iso2": "in",
"dialCode": "91",
"priority": 0,
"areaCodes": null
}];
this.phoneTextField=null;
}
componentDidMount() {
console.log('GrandChild did mount.');
// console.log(this.phoneTextField);
}
render() {
console.log(this.phoneTextField);
console.log("Register Screen");
return (
<View style={{borderColor:'red', borderWidth:0, height:'100%' }}>
<View style={{borderColor:'green', borderWidth:0, height:'20%' }}>
<View style={{borderColor:'blue', borderWidth:0, resizeMode:'contain', width:'50%', height:'100%'}}>
<Image
style={{width: '100%', height: '100%' }}
source={ require("../assets/logo.png") }
/>
</View>
</View>
<View style={{borderColor:'green', borderWidth:0, height:'40%', marginLeft:'1%', marginTop:'5%' }}>
<View style={{borderColor:'blue', borderWidth:0, resizeMode:'contain', width:'100%', height:'100%'}}>
<Image
style={{width: '100%', height: '100%' }}
source={ require("../assets/welcomescreen.jpg") }
/>
</View>
</View>
<View style={{ margin : '7%'}}>
<Text style={{ fontSize:20, fontWeight:'bold' }}>Save your time</Text>
<Text style={{ fontSize:14, color:'grey', paddingTop:'5%' }}>Please Enter your mobile number to proceed</Text>
<PhoneInput ref={ref => {
this.phoneTextField = ref;
}}
style={{paddingTop:'10%'}}
countriesList={this.countriesList}
initialCountry='in'
onChangePhoneNumber={(phone)=>{
console.log(phone);
}}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
My App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Register from "./screens/Register";
export default class App extends React.Component {
render() {
console.log("hello bros");
return (
<Register/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
I'm not familiar with that library, however, textComponent accepts a function so you should be able to do this
textComponent={
()=>{
return(<TextInput
....some props here
onFocus={()=>console.log('focused')})
}}
Related
I was editing one of the '.js' files and after saving my work after some changes, when I typed 'rr' to refresh application on the emulator, I kept getting this message.
Android Application Emulator keeps stopping
App info
Close app
enter image description here
After creating Form.js and under a components folder in my project in the visual studio code editor and importing it in my Login.js that's where the error started to occur. IDK what I did wrong. I'm new to React Native and am just learning.
Form.js
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
TextInput
} from 'react-native';
export default class Login extends Component<{}> {
render(){
return(
<View style={styles.container}>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Email"
placeholderTextColor = "#ffffff"
/>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Password"
placeholderTextColor = "#ffffff"
/>
</View>
)
}
}
const styles = StyleSheet.create({
container : {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
inputBox: {
width:300,
backgroundColor:'rgba(255,255,255,0.3)',
borderRadius: 25,
paddingHorizontal: 16,
fontSize: 16,
color:'#ffffff',
marginVertical: '10'
}
});
Login.js
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
StatusBar
} from 'react-native';
import Logo from '../components/Logo';
import Form from '../components/Form';
export default class Login extends Component<{}> {
render () {
return(
<View style={styles.container}>
<Logo/>
<Form/>
</View>
)
}
}
const styles = StyleSheet.create({
container : {
backgroundColor: '#29b6f6',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}
});
Here is your solution
Your application is crashed because of this props underlineColorAndroid="rgba(0,0,0,0)" in your TextInput and also minor change in inputBox style remove string value marginVertical: "10" to marginVertical: 10
Form.js
import React, { Component } from "react";
import { StyleSheet, Text, View, TextInput } from "react-native";
export default class Login extends Component {
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.inputBox}
// underlineColorAndroid="rgba(0,0,0,0)"<---Comment this code---
placeholder="Email"
placeholderTextColor="#ffffff"
/>
<TextInput
style={styles.inputBox}
// underlineColorAndroid="rgba(0,0,0,0)"<---Comment this code---
placeholder="Password"
placeholderTextColor="#ffffff"
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
inputBox: {
width: 300,
backgroundColor: "rgba(255,255,255,0.3)",
borderRadius: 25,
paddingHorizontal: 16,
fontSize: 16,
color: "#ffffff",
marginVertical: 10 <-----Remove string to number---
}
});
Output:--
import React from 'react';
import { Text, View } from 'react-native';
import { createDrawerNavigator, createAppContainer } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ color: 'red', fontSize: 30 ,fontWeight: 'bold'}}>Home!</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ color: 'green' , fontSize: 20 ,fontWeight: 'bold'}}>Settings!</Text>
</View>
);
}
}
const MyDrawerNavigator = createDrawerNavigator({
Home:{
screen: HomeScreen,
},
Settings: {
screen: SettingsScreen,
},
});
export default createAppContainer(MyDrawerNavigator);
I was making navigation drawer with react native with above code.The problem which i faced is that drawer is not visible to me.I tried my best to solve this problem but i couldn't.Whats wrong with my code ?
you're missing the DrawerNavigatorConfig as a second parameter. There you config how the drawer displays and you set the content component to display within the drawer. Check the docs here: https://reactnavigation.org/docs/en/drawer-navigator.html
I have following code in App.js
import React, { Component } from 'react';
import { Text, View,} from 'react-native';
import{DrawerNavigator, DrawerActions} from 'react-navigation';
import { Menu} from './src/components/menu';
export default class MainView extends Component {
render(){
return(
<View>
<Menu />
<Text> WHAT ??? </Text>
</View>
);
}
}
and following code in src/components/menu.js
'use strict';
import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, ScrollView} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';
import{DrawerNavigator, DrawerActions} from 'react-navigation';
export class Menu extends Component {
render(){
return(
<View style= {styles.navContainer}>
<View style= {styles.navContainerFlexing}>
<View>
<Icon name="bars" size={25} color= 'black' style={{marginLeft: 10, fontWeight: '200' }} onPress={() => this.props.navigation.dispatch(DrawerActions.toggleDrawer())} />
</View>
<Text style={[styles.whiteText, styles.navItem]}>Home</Text>
</View>
</View>
);
}
}
export const Drawer = DrawerNavigator(
{
Menu: Menu,
},
{
// initialRouteName: 'Home',
},
{
drawerPosition: 'left',
initialRouteName: 'Home',
drawerBackgroundColor: 'white',
drawerWidth: 300,
}
);
const styles= StyleSheet.create({
navContainer: {
height: 55,
backgroundColor: '#3ba558',
alignItems: 'center',
// flex: 1,
flexDirection: 'row',
// justifyContent: 'flex-start'
},
navContainerFlexing: {
flex: 2,
flexDirection: 'row',
backgroundColor: '#3ba558',
paddingLeft: 20
},
whiteText: {
color: 'white',
},
navItem: {
alignItems: 'center',
marginTop: 'auto',
marginBottom: 'auto',
marginLeft: 10
},
});
Now I want my Menu class to display in App.js, which is displaying but and I also want it workable DrawerNavigator in homepage, right now the drawer is giving:
undefined is not an object (evaluating '_this.props.navigation.dispatch')
I Have explained the configuration of DrawerNavigator in the below link.
Look into the accepted answer in the below link.
How to create a Drawer Component and adding it to multiple screens
As I explained in it try to understand the concept and do not copy the syntax.
Do a comparison with your configuration, you will find your problem.
I watched a tutorial about React Native on YouTube.
I have built a simple stopper app. (Android) The problem is, in the release build, one of the letters is missing. I tried to build another simple app with just having "Hello" and in the release build in my phone instead of showing "Hello" I get "Hell".
Pictures:
Development build using Nexus 6 (AVD):
Release build with LG G4 (physical):
I don't know why this is happening. I appreciate any advice and help.
Edit: index.android.js:
import React, { Component } from 'react'
import {
AppRegistry,
StyleSheet,
View,
Text,
TouchableHighlight
} from 'react-native'
class flexbox extends Component {
render() {
return (
<View style={styles.container}>
<View style={[styles.header]}>
<View style={[styles.timeWrapper]}>
<Text style={styles.timer}>00:00.00</Text>
</View>
<View style={[styles.buttonWrapper]}>
<TouchableHighlight onPress={() => console.log('Start')} underlayColor="#2ecc71" style={[styles.button, styles.startButton]}>
<Text>Start</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => console.log('Lap')} underlayColor="#1abc9c" style={[styles.button, styles.lapButton]}>
<Text>Lap</Text>
</TouchableHighlight>
</View>
</View>
<View style={[styles.footer]}>
<Text>Laps</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
header: {
flex: 1
},
footer: {
flex: 1
},
timeWrapper: {
flex: 5,
justifyContent: 'center',
alignItems: 'center'
},
buttonWrapper: {
flex: 3,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center'
},
timer: {
fontSize: 60,
color: 'black'
},
button: {
borderWidth: 2,
height: 100,
width: 100,
borderRadius: 50,
justifyContent: 'center',
alignItems: 'center'
},
startButton: {
borderColor: '#2ecc71'
},
lapButton: {
borderColor: '#1abc9c'
}
})
AppRegistry.registerComponent('flexbox', () => flexbox)
You haven't supplied any code, but I'm guessing you have created a view with exact width and height, and in order to have the text in the middle, you added padding.
Here's an example of a working circle with text:
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.circle}>
<Text>Hello</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
},
circle: {
width: 50,
height: 50,
borderRadius: 25,
justifyContent: 'center',
alignItems: 'center',
borderColor: 'red',
borderWidth: 3,
}
});
Or see example in sketch
I am using react-native .My input field is not display on full width why ? But when I check on IOS it works correctly display input field on full width .
here is my code
https://rnplay.org/apps/aHRkHA
import React from 'react';
import {
registerComponent,
} from 'react-native-playground';
import {
StatusBar,
StyleSheet,
Text,
TextInput,
View,
} from 'react-native';
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.heading}> Login</Text>
<TextInput
style={styles.loginInput}
placeholder="Type here to translate!"
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#EF501E',
flex: 1,
alignItems: 'center'
},
logo: {
width: 50,
height: 50
},
heading: {
fontSize: 30,
marginTop: 20
},
loginInput: {
height: 50,
borderWidth: 1,
borderColor: '#33090C',
flexDirection: 'row',
justifyContent: 'center',
}
});
registerComponent(App);
Try overriding the alignItems: 'center' of the parent with alignSelf: 'stretch' for <TextInput>:
<View style={styles.container}>
...
<View style={{alignSelf: 'stretch'}}>
<TextInput
style={styles.loginInput}
placeholder="Type here to translate!"
/>
</View>
</View>