I am following the tutorial
In my App.js , i have this code
const nhost = new NhostClient({ subdomain: subdomain, region: region, });
I have wrapped my code with nhostprovider
<NhostProvider nhost={nhost}>
<View>
<Text>hellooooooooo</Text>
<Text>hello</Text>
<Text>hello</Text>
<Text>hello</Text>
<TextInput
label="Email"
value={text}
onChangeText={(text) => setText(text)}
/>
<TextInput
label="password"
value={password}
onChangeText={(text) => setPassword(text)}
/>
<Button icon="login" mode="Contained" onPress={() => register()}>
Press me
</Button>
</View>
</NhostProvider>
But on android emulator, i am getting error
ge.create is not a function ....ge.create is undefined
I have one more question. I am writing code in reat native, expo , android emulator. what should i put in client url and redirect url ?
https://prnt.sc/n45Ke9zY7v8c
I followed documentation. In youtube video, its something else and in documentation, its something else.
Related
I'm making an app with expo react native, and I made a collapse that shows profile information about all users on my SQLite database.
I added a button (touchableopacity) inside the collapse and my idea is to edit information in the input where I'm showing information, but i don't know how to link the button press to the profile where is being touched.
so my code is as follows (i deleted styles to make it cleaner to see):
render(){
const miLista = this.state.datos.map((item) => //this is "list" and it works(show information of each profile and shows the button of each profile when i open the collapse of each on of them)
<ScrollView style={styles.container}>
<Collapse>
<CollapseHeader>
<Text>{item.id} {item.nombre}</Text> //here shows id and name (from sqlite data)
</CollapseHeader>
<CollapseBody >
<View key={item.id} >
<Text >Nombre</Text>
<TextInput
value={item.nombre}
onChangeText={(val) => this.setState({ nombre: val})}/>
<Text style=>Rut</Text>
<TextInput
value={item.rutPersona}
onChangeText={(val) => this.setState({ rutPersona: val})}/>
<Text >Clave</Text>
<TextInput
value={item.clave}
onChangeText={(val) => this.setState({ clave: val})}/>
{this.boton(item.id)}
</View>
</CollapseBody>
</Collapse>
</ScrollView>
);
return(
<View >
<SafeAreaView >
<TouchableOpacity
onPress={() => this.props.navigation.openDrawer()}>
<FontAwesome5 name="bars" size={24} color="#161924"/>
</TouchableOpacity>
</SafeAreaView>
<Text>Perfiles</Text>
<ScrollView>
{miLista}
</ScrollView>
</View>
);
};
so i needed to add .bind to the onpress of my button and pass the data: like this
boton(id,nombre,rutPersona,clave){
return(
<TouchableOpacity
key={id}
style={styles.boton}
onPress={this.funcionBoton.bind(this,nombre,rutPersona,clave,id)}
>
<Text>SAVE </Text>
</TouchableOpacity>
);
};
I am currently making a mobile app and part of it is collecting user data. At the minute I am stuck on getting the DatePicker to show on screen once the text field has been clicked on. I have tried to use the onFocus prop but it does not seem to be working and its not throwing any errors in the console. Here is the code that i have tried using:
const showDatePicker = () => {
return(
<DateTimePicker
value={date}
mode='date'
is24Hour={true}
display="spinner"
onChange={onChange}
/>
)
}
<View style={styles.inputContainer}>
<FontAwesome name="user-circle-o" color={'#808080'} size={20}/>
<TextInput onFocus={() => showDatePicker()} style={styles.input} placeholder="Date Of Birth"
/>
</View>
To give some additional context to the problem I am using a modal which acts as a form for collecting the data. Any help or tips appreciated.
You can wrap the TextInput with a <Pressable />.
<Pressable onPress={() => showDatePicker()}>
<TextInput />
</Pressable>
Hello guys im trying to find a react-native code which is equivalent to the html code below:
Ducks Section
<br>
<br>
<br>
<p name="Ducks">this is about ducks</p>
Consider wrapping a Text component in a TouchableOpacity.
class App extends Component {
render() {
return (
<View>
<TouchableOpacity>
<Text style={{color: 'blue'}} onPress={() => {}}>
Ducks Section
</Text>
</TouchableOpacity>
<TouchableOpacity style={{marginTop:50}}> <!-- According to you requirement-->
<Text style={{color: 'blue'}} onPress={() => {}}>
this is about ducks
</Text>
</TouchableOpacity>
<View>
);
}
}
You can use a react-native-hyperlink component for react-native-web that makes urls, fuzzy links, emails etc clickable. More discussion found here
I am using formik in react native app using expo. Whilst using it on login form it is giving this error:
ReferenceError: Can't find variable: values
<Formik
initialValues={{ email: '', password: '' }}
onSubmit={ values => {this.handleSubmit(values)}}
>
{formikProps => (
<>
<FormInput
name="email"
value={values.email}
onChangeText={formikProps.handleChange('email')}
placeholder="Enter email"
autoCapitalize="none"
iconName="ios-mail"
iconColor="#2C384A"
/>
<FormInput
name="password"
value={values.password}
onChangeText={formikProps.handleChange('password')}
placeholder="Enter password"
secureTextEntry
iconName="ios-lock"
iconColor="#2C384A"
/>
<View style={styles.buttonContainer}>
<FormButton
buttonType="outline"
onPress={formikProps.handleSubmit}
title="LOGIN"
buttonColor="#039BE5"
/>
</View>
</>
)}
</Formik>
why it is not recognizing values as I was following the tutorial accurately?
Your problem is that you're not passing values, that's why you're getting that error.
change:
{formikProps => (
To:
{({formikProps, values}) => (
For more information, check the official documentation here.
I am a beginner at React Native. When I try to type a text in a Text Input box, I'm not able to type, because the keyboard hides within 2 seconds. I don't know why this happens, here is my code, kindly solve this issue, this issue only occurs on Android devices.
Here is my code,
render() {
return (
<View style={styles.container1}>
<ScrollView>
<View style={styles.container}>
<View style={styles.SectionStyle}>
<Image source={require('../assets/padlock.png')} style={styles.ImageStyle} />
<TextInput
style={{flex:1}}
placeholder="Current Password"
underlineColorAndroid="transparent"
secureTextEntry
selectionColor={'#002B60'}
returnKeyType={'next'}
blurOnSubmit={false}
onSubmitEditing={() => this.passwordRef.focus()}
onChangeText={(oldpassword) => this.setState({oldpassword})}
/>
</View> </View>
</View>
</ScrollView>
</View>
);
}
}