Unable to implement the react-native-elements Forms? - react-native

I am trying to create a Form which can take user Name and email address with the help of react-native-elements but it is giving error inside render function(Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports).
I have tried to put the FormLabel, FormIput, and FormValidationMessage inside a View and Container in render function but it is giving me an error which I am unable to figure out.
import React from 'react';
import { View, StyleSheet} from "react-native";
import { FormLabel, FormInput, FormValidationMessage } from 'react-native-elements'
export default class UserDetailsInput extends React.Component {
render() {
return (
<View>
<FormLabel>Name</FormLabel>
<FormInput/>
<FormValidationMessage>Error message</FormValidationMessage>
</View>
);
}};
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"expo": "^32.0.0",
"native-base": "^2.12.1",
"react": "16.5.0",
"react-dom": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-elements": "^1.1.0",
"react-native-otp-inputs": "^3.0.2"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0"
},
"private": true
}
I require the react-native-elements to be shown on the UI similar as shown on the docs site.
(source: github.io)

These components have been renamed or removed in React Native Elements 1.0, your imports therefore yield undefined. Please see the corresponding release notes.

Related

Unable to resolve module, react native app

So i was starting to code a react native app and until this part was working fine:
import React from 'react';
import { View, Text, Image } from 'react-native';
import abacatezinImg from '..assets/abacatezin.png'
export function LoginScreen(){
return(
<View>
<Text>
Faça seu login para começar
</Text>
</View>
)
}
But then after adding <Image source={abacatezinImg} /> between View and Text i got this error: undefined Unable to resolve module ..assets/abacatezin.png
I already tried somethings like modifying the package json with some solutions i found but didnt work.
My packae json file:
{
"name": "timer_vovojuju",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"expo": "~47.0.9",
"expo-status-bar": "~1.4.2",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-native": "0.70.5",
"react-native-web": "~0.18.9"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#types/react": "~18.0.14",
"#types/react-native": "~0.70.6",
"typescript": "^4.6.3"
},
"private": true
}
This error might be because of your image path import. Try importing like this import abacatezinImg from '../assets/abacatezin.png'

React-native: Page navigation code returned error

I'm building a react-native app using expo and I'm using the react native navigation library to navigate between pages and link my button to the next page but I've received an error. What do I need to change to get the pages up and to get the button (on the home page) linked to the second page?
Error: Unable to resolve "fbjs/lib/areEqual" from "node_modules\react-native-gesture-handler\createHandler.js".
UPDATE: Now shoring this error too: Unable to resolve "./Components/DatePicker.js" from "screens\Home.js" bus is it possible that it's not related to the datePicker? I think it's about the react-native-gesture-handler. Do I need to do anything specifically for Android if I'm using expo to navigate to different screens?
AppNavigator.js
import { createStackNavigator } from 'react-navigation';
import Home from './screens/Home';
import Plan from './screens/Plan'
const AppNavigator = createStackNavigator({
Home: { screen: Home },
Plan: { screen: Plan},
});
export default AppNavigator;
App.js
import React from 'react';
import AppNavigator from './AppNavigator';
export default class App extends React.Component {
render() {
return (
<AppNavigator/>
);
}
}
Package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#unimodules/react-native-adapter": "^3.0.0",
"deep-equal": "^1.0.1",
"expo": "^34.0.1",
"expo-constants": "~6.0.0",
"expo-image-picker": "~6.0.0",
"expo-permissions": "~6.0.0",
"react": "16.8.3",
"react-dom": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
"react-native-calendar-select": "^0.1.2",
"react-native-datepicker": "^1.7.2",
"react-native-gesture-handler": "^1.3.0",
"react-native-image-picker": "^1.0.2",
"react-native-unimodules": "^0.5.3",
"react-native-web": "^0.11.4",
"react-navigation": "^3.11.1"
},
"devDependencies": {
"babel-preset-expo": "^6.0.0"
},
"private": true
}

Load customised font in react native

I want to load custom font i my app.
I try this
Create a assets/fonts where you can find the fonts i want to use
I add rnmp in the package.json like that :
"rnmp": { "assets": ["./assets/fonts/"] }
I link like that: react-native link
Then i use my font like that :
fontFamily: "Lato-Light",
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"expo": "^32.0.6",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-
32.0.0.tar.gz",
"react-navigation": "^3.11.0"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0"
},
"rnmp": {
"assets": ["./assets/fonts/"]
},
"private": true
}
The font should be load but i get this error :
"fontFamily" "Lato-Light" is not a system font and has not been loaded through Font.loadAsync
I assume you are using expo in this project. As the error you've shown says, you just have to load the desired fonts in the app loading process.
In you App.js file, import the fonts you want to use as const, and add an async call to load them into the app. You can use the following code:
//In the import section
import {Font} from 'expo';
const Light = require('./assets/fonts/Lato-Light.ttf');
//In the componentDidMount
await Font.loadAsync({
'Lato-Light': Light
});
Note the await in the Font.loadAsync call. You have to make the componentDidMount method async (async componentDidMount() {...}) and then add await before the Font... call.
Hope this helps!

error when using connect (function of the react-redux library)

I have a component class that I am using react-redux to connect the redux store, but I am getting an error when I try to pass the component into the connect function.
_react.default.memo is not a function. (In '_react.default.memo(ConnectFunction),
'_react.default.memo' is undefined)
wrapWithConnect C:\Users\SESA506797XmobileApp Gatherman\node modul es react-redux\lib\components connectAdvanced.js: 339:45
I enclose an image of the generated errerur
Here is the content of the class in which connect was called
FilmDetail
import React from 'react'
import { StyleSheet, View, ActivityIndicator, ScrollView, Text, Image }
from 'react-native'
import { getFilmDetailFromApi, getImageFromApi } from '../API/TMDBApi'
import { connect } from 'react-redux'
class FilmDetail extends React.Component {
constructor(props) {
super(props)
this.state = {
film: undefined,
}
}
componentDidMount() {
getFilmDetailFromApi(this.props.navigation.state.params.idFilm).then(data => {
this.setState({
film:data,
isLoading: false
})
})
}
_displayFilm(){
const film = this.state.film
if(film != undefined){
return(
<ScrollView style={styles.scrollView_container}>
<Image
style = {styles.image}
source = {{uri: getImageFromApi(film.backdrop_path)}}
/>
<Text style={styles.title_text}>{film.title}</Text>
<Text style={styles.description_text}>{film.overview}</Text>
<Text style={styles.default_text}>Note : {film.vote_average} / 10</Text>
</ScrollView>
)
}
}
render() {
return (
<View style={styles.main_container}>
{this._displayFilm()}
</View>
)
}
}
const styles = StyleSheet.create({
main_container: {
flex: 1
},
})
const mapStateToProps = (state) => {
return state
}
export default connect(mapStateToProps)(FilmDetail)
This is my package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"expo": "^32.0.0",
"numeral": "^2.0.6",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-modal": "^9.0.0",
"react-navigation": "^3.6.1",
"react-redux": "^7.0.1",
"redux": "^4.0.1"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0"
},
"private": true
}
Had a while ago what I think is the same problem as you. I updated to the latest React version with:
npm install react#latest
Then installed version 0.4.0 of the react schedule package with:
npm i schedule#0.4.0 --save-dev
And downgraded react-redux with
npm i react-redux#6.0.1
at least for the moment my problem is solved, hope it works with yours.
If you're using expo, you have to downgrade your react-redux and clear expo cache.
npm i react-redux#6.0.1
npm i
expo r -c
I use yarn to solve it (or npm if you want)
yarn add react-redux
It will update your 'react-redux' to latest version and it solve my problem. Hope it helpful.
Just update your React to the latest version. It's backward compatible, so no need to worry.
npm install react#latest
React.memo is only available on React version 16.6 and above.
https://reactjs.org/blog/2018/10/23/react-v-16-6.html
It happened because you used the most recent version of react-redux dependent on react.memo API which is not supported by the Expo SDK. To solve this problem, you can install the older version of react-redux such as version 6.0.
I was having the same issue and and got fixed when I downgraded my react-redux back to version 4.4.9
npm install react-redux#4.4.9
or if you using yarn
yarn add react-redux#4.4.9
Hope it works for you too. But make sure first this dramatic downgrade doesn't affect your project in a negative way.
Had the same issue. It was solved by switching to yarn and reinstalling all modules with the following setup:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"#expo/vector-icons": "^9.0.0",
"date-fns": "^1.30.1",
"expo": "^32.0.6",
"moment": "^2.24.0",
"native-base": "^2.10.0",
"react": "16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-elements": "^0.19.1",
"react-navigation": "^3.0.9",
"react-redux": "^6.0.0",
"redux": "^4.0.1"
},
"devDependencies": {
"babel-preset-expo": "^5.1.1",
"schedule": "^0.4.0"
},
"private": true
}

Error trying to import a module on expo bunddle: Unable to resolve "../shared/baseUrl" from "components/MenuComponent.js"

I have been trying to run react-native app on expo on my android phone. I haven't been able because I am getting an error Unable to resolve "../shared/baseUrl" from "components/MenuComponent.js" on expo.
This is the folder tree of my project where you can see baseUrl and MenuComponent.js (The other js modules on components import baseUrl.js with error.):
The following is the imports section of the components/MenuComponent.js:
import React, { Component } from 'react';
import { View, FlatList } from 'react-native';
import { Tile } from 'react-native-elements';
import { connect } from 'react-redux';
import { baseUrl } from '../shared/baseUrl';
The following is the content of shared/baseUrls.js
export const baseUrl = 'http://localhost:3001/';
This is my package.json:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"expo": "^32.0.0",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-elements": "^1.0.0-beta8",
"react-navigation": "2.0.1",
"react-redux": "5.0.7",
"redux": "4.0.0",
"redux-logger": "3.0.6",
"redux-thunk": "2.2.0"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0"
},
"private": true
}
I am using those packages versions because they are the suggested on the course I am taking.
To solve the issue, I have tried
yarn cache clean
expo r -c
Clear data/cache of expo on my cellphone.
The following is the content of shared/baseUrls.js
Are you absolutely sure the paths are correct?
What happens if you move the file in the same folder temporarily and include it from there?
import { baseUrl } from './baseUrl';