I'm trying to use tcomb-form-native in my react-native (android) app but i get this error msg: undefined is not an object (evaluating '_react.PropTypes.string') react native
I used following commands for install tcomb-form-native :
npm install tcomb-form-native
npm install tcomb --save
npm install tcomb-json-schema
this is my code :
Sign in.js
import React, { Component, PropTypes } from 'react';
import {
StyleSheet,
Image,
KeyboardAvoidingView,
Alert,
TouchableHighlight,
} from 'react-native';
import t from 'tcomb-form-native';
const Form = t.form.Form;
const Login = t.struct({
username: t.String,
password: t.String
});
const options = {
fields: {
password: {
type: 'password',
placeholder: 'Password',
},
username: {
placeholder: 'e.g: abc#gmail.com',
error: 'Insert a valid email'
}
}
}
class SignIn extends Component {
onPress() {
const value = this.refs.form.getValue();
if (value) {
console.log(value);
}
};
render() {
return (
<View style={styles.container}>
<Form
ref="form"
type={Login}
options={options}
/>
<Text style={{color: 'blue', marginBottom: 10}}
onPress={() => Linking.openURL('https://www.google.co.in')}>
Forgot Password?
</Text>
<TouchableHighlight style={styles.button} onPress={this.onPress} underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Sign In</Text>
</TouchableHighlight>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
justifyContent: 'center',
marginTop: 50,
padding: 20,
backgroundColor: '#ffffff',
},
title: {
fontSize: 30,
alignSelf: 'center',
marginBottom: 30
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
button: {
height: 36,
backgroundColor: '#48BBEC',
borderColor: '#48BBEC',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
alignSelf: 'stretch',
justifyContent: 'center'
}
});
export default SignIn;
Index.js
import React, { Component } from 'react';
import { Scene, Router } from 'react-native-router-flux';
import Page1 from './src/page1';
import Page2 from './src/page2';
import Login from './src/components/login/Login';
import SignUp from './src/components/login/SignUp';
import SignIn from './src/components/login/SignIn';
import GeoMap from './src/components/maps/GeoMap';
class App extends Component {
render() {
return (
<Router>
<Scene key="root">
<Scene key="signIn" component={SignIn} hideNavBar={true} title="Sign In" initial="true"/>
<Scene key="login" component={Login} hideNavBar={true} title="Login" />
<Scene key="p1" component={Page1} title="Page1" />
<Scene key="p2" component={Page2} title="Page2" />
<Scene key="signIn" component={Login} title="Sign In" />
<Scene key="signUp" component={SignUp} title="Sign Up" />
<Scene key="geoMap" component={GeoMap} title="Maps" />
</Scene>
</Router>
);
}
}
export default App;
index.android.js
import {
AppRegistry
} from 'react-native';
import App from './app/index';
AppRegistry.registerComponent('GravitonApp', () => App);
Since React v15.5, React.PropTypes has moved into a different package. You should use the prop-types library instead.
import PropTypes from 'prop-types'
instead of
import { PropTypes } from 'react'
Related
I have an error when i try to navigate using react.navigation.
I also have a visual bug since i've added react navigation.
Here's my code for app.js :
import React, { useState } from "react";
import {
StyleSheet,
Text,
View,
Image,
TextInput,
Button,
TouchableOpacity,
} from "react-native";
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import HomeScreen from './HomeScreen';
import RegisterScreen from './RegisterScreen';
const Stack = createNativeStackNavigator();
export default function App() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const link = "./Ressources/logoressources.png";
/*async function ClickLogin(){
alert(email);
l
}
async function ClickRegister(){
alert(email);
}
async function ClickMotDePasseOublie(){
alert("Fallait pas l'oublier (Veuillez l'ecrire sur un papier que vous nous remettrez la prochaine fois)");
}*/
//<Stack.Navigator>
/* <Stack.Screen
name="Home"
component={HomeScreen}
/>*/
//</Stack.Navigator>
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false
}}>
<Stack.Screen
name="Home"
component={HomeScreen}
/>
<Stack.Screen
name="Register"
component={RegisterScreen}
/>
</Stack.Navigator>
<HomeScreen />
</NavigationContainer>
);
}
Here the code of the HomePage.js :
import React, { useState } from "react";
import RegisterScreen from './RegisterScreen';
import {
StyleSheet,
Text,
View,
Image,
TextInput,
Button,
TouchableOpacity,
} from "react-native";
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
//import HomeScreen from './HomeScreen';
const Stack = createNativeStackNavigator();
const HomeScreen = ({navigation}) => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const link = "./Ressources/logoressources.png";
async function ClickLogin(){
alert(email);
}
async function ClickRegister(){
navigation.navigate("Register");
}
async function ClickMotDePasseOublie(){
alert("Fallait pas l'oublier (Veuillez l'ecrire sur un papier que vous nous remettrez la prochaine fois)");
}
//<Stack.Navigator>
/* <Stack.Screen
name="Home"
component={HomeScreen}
/>*/
//</Stack.Navigator>
return (
<View style={styles.container}>
<Image style={styles.image} source={require(link)} />
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="Email"
placeholderTextColor="#003f5c"
onChangeText={(email) => setEmail(email)}
/>
</View>
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="Mot de passe"
placeholderTextColor="#003f5c"
secureTextEntry={true}
onChangeText={(password) => setPassword(password)}
/>
</View>
<View style={styles.inputViewConfirm}>
<TextInput
style={styles.TextInput}
placeholder="Confirmer mot de passe"
placeholderTextColor="#003f5c"
secureTextEntry={true}
onChangeText={(password) => setPassword(password)}
/>
</View>
<TouchableOpacity onPress={ClickMotDePasseOublie}>
<Text style={styles.forgot_button}>Mot de passe oublié ?</Text>
</TouchableOpacity>
<TouchableOpacity onPress={ClickRegister}>
<Text style={styles.Register_button}>Pas de compte ? Inscrivez-vous !</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.loginBtn}
onPress={ClickLogin}>
<Text style={styles.loginText}>Se connecter</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#16a085",
alignItems: "center",
justifyContent: "center",
},
image: {
marginBottom: 10,
height: 200,
},
inputView: {
backgroundColor: "#A6E4E7",
borderRadius: 30,
width: "75%",
height: 45,
marginBottom: 20,
alignItems: "center",
},
inputViewConfirm: {
backgroundColor: "#A6E4E7",
borderRadius: 30,
width: "75%",
height: 45,
marginBottom: 20,
alignItems: "center",
},
TextInput: {
height: 50,
flex: 1,
marginLeft: 10,
},
forgot_button: {
height: 30,
marginBottom: 20,
},
Register_button: {
color: "#4834d4",
height: 30,
marginBottom: 10,
},
loginBtn: {
width: "80%",
borderRadius: 25,
height: 50,
alignItems: "center",
justifyContent: "center",
marginTop: 5,
backgroundColor: "#88FFDD",
},
});
export default HomeScreen;
And the registerScreen Code :
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const RegisterScreen = ({navigation}) => {
return (
<View style={styles.container}>
<Text>Add friends here!</Text>
</View>
);
}
// ...
export default RegisterScreen;
This is my error :
And now a screenshot of the render of the application :
Do you have a solution for me ?
I Have tryed to remove the top navigation bar to realign the interface but nothing worked.
I also verified my routes for the redirection bug, already searched answers on the internet and in the documentation but nothing got found.
Promise Unhandled Promise Rejection is usually an error from a function and not from your navigation.
From the code you provided, this error might be coming from your alert function.
If your function "alert" is really a promise (I see that you used the "async" word), you should use "await" before the function call:
await alert()
Also, remember to use try/catch when creating the function.
This way you'll be able to catch and console the error to better understand where it comes from.
async function alert() {
try {
// do some async work
await doSomething()
} catch (error) {
// understand error
console.log(error)
// handle error
}
}
java.lang.IllegalStateException: Native module RNC_AsyncSQLiteDBStorage tried to override AsyncStorageModule. Check the getPackages() method in MainApplication.java, it might be that module is being created twice. If this was your intention, set canOverrideExistingModule=true. This error may also be present if the package is present only once in getPackages() but is also automatically added later during build time by autolinking. Try removing the existing entry and rebuild.
MainApplication.java
#Override
protected List<ReactPackage> getPackages() {
#SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
return packages;
}
Register/index.js
import React, {useState} from 'react';
import {StyleSheet, View, ScrollView} from 'react-native';
import {Button, Gap, Header, Input, Loading} from '../../components';
import {colors, storeData, useForm} from '../../utils';
import {Fire} from '../../config';
import {showMessage} from 'react-native-flash-message';
const Register = ({navigation}) => {
const [form, setForm] = useForm({
fullName: '',
profession: '',
email: '',
password: '',
});
const [loading, setLoading] = useState(false);
const onContinue = () => {
console.log(form);
const data = {
fullName: form.fullName,
profession: form.profession,
email: form.email,
};
navigation.navigate('UploadPhoto', data);
// setLoading(true);
// Fire.auth()
// .createUserWithEmailAndPassword(form.email, form.password)
// .then((success) => {
// setLoading(false);
// setForm('reset');
// const data = {
// fullName: form.fullName,
// profession: form.profession,
// email: form.email,
// };
// Fire.database()
// .ref('users/' + success.user.uid + '/')
// .set(data);
// storeData('user', data);
// navigation.navigate('UploadPhoto', data);
// console.log('register success:', success);
// })
// .catch((error) => {
// const errorMessage = error.message;
// setLoading(false);
// showMessage({
// message: errorMessage,
// type: 'default',
// backgroundColor: colors.error,
// color: colors.white,
// });
// console.log('error:', error);
// });
};
return (
<>
<View style={styles.page}>
<Header onPress={() => navigation.goBack()} title="Daftar Akun" />
<View style={styles.content}>
<ScrollView showsVerticalScrollIndicator={false}>
<Input
label="Full Name"
value={form.fullName}
onChangeText={(value) => setForm('fullName', value)}
/>
<Gap height={24} />
<Input
label="Pekerjaan"
value={form.profession}
onChangeText={(value) => setForm('profession', value)}
/>
<Gap height={24} />
<Input
label="Email"
value={form.email}
onChangeText={(value) => setForm('email', value)}
/>
<Gap height={24} />
<Input
label="Password"
value={form.password}
onChangeText={(value) => setForm('password', value)}
secureTextEntry
/>
<Gap height={40} />
<Button title="Continue" onPress={onContinue} />
</ScrollView>
</View>
</View>
{loading && <Loading />}
</>
);
};
export default Register;
const styles = StyleSheet.create({
page: {backgroundColor: colors.white, flex: 1},
content: {padding: 40, paddingTop: 0},
});
UploadPhoto/index.js
import React, {useState} from 'react';
import {StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native';
import {IconAddPhoto, ILNullPhoto, IconRemovePhoto} from '../../assets';
import {Header, Link, Button, Gap} from '../../components';
import {colors, fonts} from '../../utils';
import {launchImageLibrary} from 'react-native-image-picker';
import {showMessage} from 'react-native-flash-message';
export default function index({navigation, route}) {
const {fullName, profession, email} = route.params;
console.log('fullName:', fullName)
console.log('profession:', profession)
console.log('email:', email)
const [hasPhoto, setHasPhoto] = useState(false);
const [photo, setPhoto] = useState(ILNullPhoto);
const getImage = () => {
launchImageLibrary({}, (response) => {
console.log('response:', response);
if (response.didCancel || response.error) {
showMessage({
message: 'oops, sepertinya anda tidak memilih fotonya?',
type: 'default',
backgroundColor: colors.error,
color: colors.white,
});
} else {
const source = {uri: response.uri};
setPhoto(source);
setHasPhoto(true);
}
});
};
return (
<View style={styles.page}>
<Header title="Upload Photo" />
<View style={styles.content}>
<View style={styles.profile}>
<TouchableOpacity style={styles.avatarWrapper} onPress={getImage}>
<Image source={photo} style={styles.avatar} />
{hasPhoto && <IconRemovePhoto style={styles.addPhoto} />}
{!hasPhoto && <IconAddPhoto style={styles.addPhoto} />}
</TouchableOpacity>
<Text style={styles.name}>Ferdiansyah</Text>
<Text style={styles.profession}>Programmer</Text>
</View>
<View>
<Button
disable={!hasPhoto}
title="Upload and Continue"
onPress={() => navigation.replace('MainApp')}
/>
<Gap height={30} />
<Link
title="Skip for this"
align="center"
size={16}
onPress={() => navigation.replace('MainApp')}
/>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
page: {flex: 1, backgroundColor: colors.white},
content: {
paddingHorizontal: 40,
paddingBottom: 64,
flex: 1,
justifyContent: 'space-between',
},
profile: {
alignItems: 'center',
flex: 1,
justifyContent: 'center',
},
avatar: {width: 110, height: 110, borderRadius: 110 / 2},
avatarWrapper: {
width: 130,
height: 130,
borderWidth: 1,
borderColor: colors.border,
borderRadius: 130 / 2,
alignItems: 'center',
justifyContent: 'center',
},
addPhoto: {position: 'absolute', bottom: 8, right: 6},
name: {
fontSize: 24,
color: colors.text.primary,
fontFamily: fonts.primary[600],
textAlign: 'center',
},
profession: {
fontSize: 18,
fontFamily: fonts.primary.normal,
textAlign: 'center',
color: colors.text.secondary,
marginTop: 4,
},
});
Had the same issue here.
My ejected Expo app runs well on iOS but gets the error for Android.
I fixed it by removing a "duplicated" AsyncStorage package from my package.json for some reason I had the community package as well as the package recommended by ReactNative.dev
Once removing the community package, cleaned the node_modules and build everything without issues.
"#react-native-async-storage/async-storage": "^1.13.2",
"#react-native-community/async-storage": "~1.12.0",
In package.json, I removed the community one, rebuilt the project then it worked.
To solve native module rnc_asyncsqlitedbstorage tried to override asyncstorage module, you should do like this:
npm install react-scripts --save
npm install -g react-native-cli
npm i #react-native-async-storage/async-storage
npm i #react-native-community/async-storage
npm rebuild
Delete the Community async line from package.json (your version may be different)
"#react-native-community/async-storage": "^1.12.1",
PS: if red screen reappears again then npm rebuild and then re run.
I fixed it by running this
npm i #react-native-async-storage/async-storage
I'm totally new to expo and react native
I'm trying to use ImageBackground
I use it as the code below but I get this error "Unable to resolve "./assets/back.jpg" from "app\components\Login.js" "
My image is already in assets folder in my project
And also when I try to import font I get the same error
Does it need to import something before using or something else?
I also Tried it by not importing the image and adding the path directly to source property
Login.js
import React, { Component } from 'react';
import back from './assets/back.jpg';
import {
StyleSheet,
Text,
View,
TextInput,
KeyboardAvoidingView,
TouchableOpacity,
AsyncStorage,
Image,
ImageBackground,
} from 'react-native';
import {createStackNavigator, createAppContainer} from 'react-navigation';
export default class Login extends React.Component {
static navigationOptions = {
header: null,
};
constructor(props) {
super(props);
this.state = {
username:'',
password:'',
}
}
componentDidMount(){
this._loadInitialState().done();
}
_loadInitialState = async () =>{
var value = await AsyncStorage.getItem('user');
if (value !=null){
this.prop.navigation.navigate('Profile');
}
}
render() {
return (
<ImageBackground source={back} style={styles.backImg}>
<KeyboardAvoidingView behavior='padding' style={styles.wrapper}>
<View style={styles.container}>
<Image
style={styles.logo}
source={require('/MyFirst/assets/logo.png')}
/>
<TextInput
style={styles.textInput} placeholder='Username'
onChangeText={(username) =>this.setState({username}) }
underlineColorAndroid = 'transparent'
/>
<TextInput
style={styles.textInput} placeholder='Password'
onChangeText={(password) =>this.setState({password}) }
underlineColorAndroid = 'transparent'
/>
<TouchableOpacity style={styles.btn}
onPress={this.login}>
<Text style={styles.btnText}>Login</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
wrapper:{
flex:1,
},
container:{
flex:1,
alignItems:'center',
justifyContent:'center',
backgroundColor:'#e5ffd3',
paddingLeft:40,
paddingRight:40,
},
logo:{
width: 250,
height: 250,
},
textInput:{
alignSelf:'stretch',
padding:16,
marginBottom:20,
backgroundColor:'#fff',
borderWidth: 1,
borderColor: '#d6d7da',
borderRadius: 25,
},
btn:{
alignSelf:'stretch',
backgroundColor:'#589e25',
padding:20,
alignItems: 'center',
borderRadius: 25,
},
btnText:{
color: '#ffffff',
},
})
App.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import {createStackNavigator, createAppContainer} from 'react-navigation';
import Login from './app/components/Login'
import Profile from './app/components/Profile'
const MainNavigator = createStackNavigator({
Home: {screen: Login},
Profile: {screen: Profile},
});
const App = createAppContainer(MainNavigator);
export default App;
You should use ImageBackground in this way. It will solve your problem
<ImageBackground source={require('../../assets/back.jpg')} style={styles.backImg}>
Working example can be found here Link
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 have this code in App.js (I'm using CRNA create-react-native-app).
import React from 'react';
import {StyleSheet, Text, View, Button, Navigator, Image} from 'react-native';
import {Container, Content, Header, Body, Icon} from 'native-base';
import UserLocation from './pages/UserLocation';
import ShopNow from './pages/ShopNow';
import ItemFavorite from './pages/ItemFavorite';
import {createStackNavigator,createDrawerNavigator, DrawerItems} from 'react-navigation';
export default class App extends React.Component {
constructor(props) {
super(props);
}
static navigationOptions = {
title:'Welcome',
headerLeft:
<View style={{paddingLeft:16}}>
<Icon
name="md-menu"
size={30}
color='black'
onPress={() => navigation.navigate('DrawerOpen')} />
</View>
}
render() {
return (
<AppStackNavigator/>
//<MyAppDrawer/>
);
}
}
const CustomDrawer = (props) => (
<Container>
<Header style={{
height:200
}}>
<Body>
<Image
style={styles.drawerImage}
source={require('./images/logo.png')}
/>
</Body>
</Header>
<Content>
<DrawerItems {...props} />
</Content>
</Container>
)
const MyAppDrawer = createDrawerNavigator({
Home: {
screen: UserLocation
},
Shop: {
screen: ShopNow
},
Favorite: {
screen: ItemFavorite
}
},{
initialRouteName: 'Home',
contentComponent: CustomDrawer,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
});
const AppStackNavigator = createStackNavigator({
Drawer: {screen: MyAppDrawer},
App: {
screen: UserLocation,
// navigationOptions:{
// title:'Welcome',
// headerLeft:
// <View style={{paddingLeft:16}}>
// <Icon
// name="md-menu"
// size={30}
// color='black'
// onPress={() => navigation.navigate('DrawerOpen')} />
// </View>
// }
},
ShopNow: { screen: ShopNow },
ItemFavorite: { screen: ItemFavorite}
});
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
drawerImage: {
height: 150,
width: 150,
borderRadius: 75
}
});
I don't know why anywhere I put the static navigationOptions, it doesn't change the header of the first page.
I also tried using the static navigationOptions.headerLeft in the specific page to add hamburger-icon, it doesn't work.
But in the page 'ItemFavorite' at the bottom of the file I set this:
ItemFavorite.navigationOptions = {
drawerIcon: (
<Image source={require('../images/tablet.png')} style={{ height: 24, width: 24 }} />
),
title: 'Favorite Item',
headerLeft: <Text onPress={() =>
navigation.navigate('DrawerOpen')}>Menu</Text>
}
it works! But not working in the first page of stack.
Do I miss something here?
You need put Your View in same line as headerLeft
import React from 'react';
import {StyleSheet, Text, View, Button, Navigator, Image} from 'react-native';
import {Container, Content, Header, Body, Icon} from 'native-base';
import UserLocation from './pages/UserLocation';
import ShopNow from './pages/ShopNow';
import ItemFavorite from './pages/ItemFavorite';
import {createStackNavigator,createDrawerNavigator, DrawerItems} from 'react-navigation';
export default class App extends React.Component {
constructor(props) {
super(props);
}
static navigationOptions = {
title:'Welcome',
headerLeft: <View style={{paddingLeft:16}}>
<Icon
name="md-menu"
size={30}
color='black'
onPress={() => navigation.navigate('DrawerOpen')} />
</View>
}
render() {
return (
<AppStackNavigator/>
//<MyAppDrawer/>
);
}
}