The next View component after the dropdown-picker is used is visible. If we exclude the <View> and just use the <Text> component. The <Text> component is hidden. However, if we use <Text> inside <View> the component is not hidden.
I tried using zIndex but didn't work. Maybe because I didn't use it in the right place. I also tried using different background color but that too didn't work.
Here is the expo link too. https://snack.expo.dev/5-GpW2eEU8
If I add zIndex to that code, it works fine on snack and even the uploaded code from there work well in my device. However, the same code in my local machine does not work. Is it because of the react native version?
My package.json file is:
"name": "Test",
"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.0",
"expo-status-bar": "~1.4.2",
"react": "18.1.0",
"react-native": "0.70.5",
"react-native-dropdown-picker": "^5.4.4"
},
"devDependencies": {
"#babel/core": "^7.19.3"
},
"private": true
}
Interestingly, it works fine with dropDownDirection='TOP'
Also, when I tried using Element Inspector, the <View> after dropdown gets hidden.
return someCondition ? ComponentForTruthyCase : ComponentFalseyCase
Related
I have installed to my RN project dependencies react-navigation/drawer, react-native-gesture-handler and react-native-reanimated. Added react-native-reanimated/plugin to babel.config.js in root directory and cleared cache.
And once without no error in terminal my Expo Go on iphone and Android just stoped working. When I press npm start in VC code it is starting sucessfully. But on the phone I just see splash screen and then it closes itself.
In console of VS code I see the error
[{
"resource": "/c:/Users/user/MealAppProject/package.json",
"owner": "_generated_diagnostic_collection_name_#1",
"code": "768",
"severity": 4,
"message": "Problems loading reference 'vscode://schemas/settings/configurationDefaults': Unable to load schema from 'vscode://schemas/settings/configurationDefaults': cannot open vscode://schemas/settings/configurationDefaults. Detail: Unable to resolve text model content for resource vscode://schemas/settings/configurationDefaults.",
"startLineNumber": 1,
"startColumn": 1,
"endLineNumber": 1,
"endColumn": 2
}]
But I don't know is it connected? or it's 2 separate problems.
My package.json is here
{
"name": "mealappproject",
"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": {
"#react-navigation/drawer": "^6.5.8",
"#react-navigation/native": "^6.1.3",
"#react-navigation/native-stack": "^6.9.9",
"expo": "~47.0.12",
"expo-status-bar": "~1.4.2",
"react": "18.1.0",
"react-native": "0.70.5",
"react-native-gesture-handler": "~2.8.0",
"react-native-reanimated": "~2.12.0",
"react-native-safe-area-context": "4.4.1",
"react-native-screens": "~3.18.0"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
I've been trying to uninstall app and install again. No result.
Trying to uninstal these navigation dependacies and back to the previous config. No result. I have no idea what I can do else.
I have the same problem, you can solve them with, "close the EDI and open it again".
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'
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!
I'm using an expo application
with these packages installed :
react-navigation and react-native-calendar.
recently I've updated the expo-cli and SDK to 32
in Genymotion emulator everything works great,
but in my phone (MI MIX) after the google login modal appears and i login
the app crashes.
the code for the login is as follwed:
import { Google } from 'expo';
in the componentDidMount:
const result = await Google.logInAsync({
androidClientId: 'someclientid',
iosClientId: 'someclientid',
scopes: ['profile', 'email','https://www.googleapis.com/auth/calendar'],
});
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-calendars": "^1.172.0",
"react-navigation": "^3.11.0"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0"
},
"private": true
}
any clue whata am i doing wrong?
EDIT:
it seems like it works on other android devices
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.