I'm using React Native and React Native Paper and I am fiddling around with the TextInput component. I type some random text inside so it overflows
No problem, but when I deselect it, it goes on multiple lines.
How can I make it so it stays on one line even if I deselect it?
Code:
<TextInput
label="text"
mode="outlined"
style={{
width: vw(50),
}}
/>
Package.json:
{
"name": "code",
"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": {
"#apollo/client": "3.4.16",
"#react-navigation/drawer": "^6.5.0",
"#react-navigation/native": "^6.0.13",
"#react-navigation/stack": "^6.3.2",
"expo": "~46.0.16",
"expo-cli": "^6.0.6",
"expo-status-bar": "~1.4.0",
"firebase": "9.12.1",
"graphql": "15.7.2",
"react": "18.0.0",
"react-native": "0.69.6",
"react-native-css-vh-vw": "^1.0.5",
"react-native-elements": "^3.4.2",
"react-native-gesture-handler": "~2.5.0",
"react-native-paper": "5.0.0-rc.10",
"react-native-reanimated": "~2.9.1",
"react-native-reanimated-carousel": "^3.1.0",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0",
"true": "^0.0.4"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
Try this:
<TextInput
label="text"
mode="outlined"
multiline={false}
numberOfLines={1}
style={{
width: vw(50),
}}
/>
You have the property multiline, if you set it to false it won't go in two lines. Search for multine here -> https://callstack.github.io/react-native-paper/text-input.html#multiline
Related
I just added react-redux with reduxjs/toolkit on react-native.
I tried in dev mode and its been working fine.
I tried with expo start --no-dev --minify and it crashed.
I decided to publish it and when I launched it, my app instantly crashed.
Why ?
package.json
{
"name": "cusual 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": {
"#react-native-picker/picker": "2.4.2",
"#react-navigation/bottom-tabs": "^6.4.0",
"#react-navigation/native": "^6.0.13",
"#react-navigation/native-stack": "^6.9.1",
"#reduxjs/toolkit": "^1.8.6",
"#types/axios": "^0.14.0",
"axios": "^1.1.3",
"eas-cli": "^2.5.1",
"expo": "~46.0.16",
"expo-status-bar": "~1.4.0",
"expo-updates": "~0.14.6",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "0.69.6",
"react-native-dotenv": "^3.3.1",
"react-native-picker-select": "^8.0.4",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "~0.18.7",
"react-redux": "^8.0.4"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#types/react": "~18.0.14",
"#types/react-native": "~0.69.1",
"#types/react-native-vector-icons": "^6.4.12",
"typescript": "~4.3.5"
},
"private": true
}
This line makes my app crahes :
const App = () => {
return (
<Provider store={store}>
<Router />
</Provider>
);
};
If I comment provider's lines, it doesn't crash anymore.
Did I miss anything ?
I'm using SDK 46 and expo 6.0.6.
Thanks for help.
Having the same issue. Looks to be caused by a bug in the Redux code. Have a look at this issue on GitHub:
https://github.com/reduxjs/redux/issues/4443
Describes a crash that happens when code is minified and running in production mode.
Maps are rendered empty while using Expo SDK 46, it was working perfectly in previous SDK versions, my Google API Keys are set and all required APIs are enabled. It just shows a blank map with the Google Logo
Here is my package.json
{
"name": "my-app",
"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-google-fonts/nunito": "^0.2.2",
"#react-navigation/bottom-tabs": "^6.3.2",
"#react-navigation/core": "^6.2.2",
"#react-navigation/native": "^6.0.11",
"#react-navigation/native-stack": "^6.7.0",
"axios": "^0.27.2",
"expo": "~46.0.7",
"expo-app-loading": "~2.1.0",
"expo-location": "~14.3.0",
"expo-secure-store": "^11.3.0",
"expo-status-bar": "~1.4.0",
"firebase": "8.2.3",
"lottie-react-native": "5.1.3",
"moment": "^2.29.4",
"react": "18.0.0",
"react-native": "0.69.4",
"react-native-bouncy-checkbox": "^3.0.2",
"react-native-check-box": "2.1.7",
"react-native-dropdown-picker": "^5.4.2",
"react-native-gesture-handler": "^2.5.0",
"react-native-google-places-autocomplete": "^2.4.1",
"react-native-maps": "^0.31.1",
"react-native-maps-directions": "^1.9.0",
"react-native-modal-datetime-picker": "^13.1.2",
"react-native-safe-area-context": "^4.3.1",
"react-native-svg-transformer": "^1.0.0",
"react-native-vector-icons": "^9.2.0",
"react-native-webview": "11.23.0"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
I am also facing the same problem with Expo SDK 46, The maps rendered are blank with only the Google Logo. Migrating back to Expo 44 was the only option which worked for me
strong text
Please I need your help with this error which giving me on android emulator. I have spent plenty time to fix it and run my app but unfortunately I couldn't.
strong text
Here is screenshots of my Package json file
{
"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": {
"#react-native-community/masked-view": "^0.1.11",
"#react-navigation/drawer": "^6.1.8",
"#react-navigation/native": "^6.0.6",
"#react-navigation/stack": "^6.0.11",
"expo": "~42.0.1",
"expo-linear-gradient": "^9.2.0",
"expo-status-bar": "~1.0.4",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
"react-native-gesture-handler": "^1.10.3",
"react-native-linear-gradient": "^2.5.6",
"react-native-reanimated": "^2.2.3",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.8.0",
"react-native-web": "~0.13.12",
"react-redux": "^7.2.5",
"redux": "^4.1.1",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#babel/core": "^7.9.0"
},
"private": true
}
I'm trying to use Ionicons on react-native app using expo, unfortunately the icon is not showing and the following error is received:
fontFamily "ionicons" is not a system font and has not been loaded through Font.loadAsync.
If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
If this is a custom font, be sure to load it with Font.loadAsync.
I'm using Iocincons in the following way:
import { Ionicons } from '#expo/vector-icons';
....
<Ionicons name="arrow-back" size={24} color="black" />
In addition, this is my package.json file:
{
"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": {
"#expo/vector-icons": "^12.0.4",
"#react-native-community/masked-view": "^0.1.10",
"axios": "^0.21.1",
"expo": "~40.0.0",
"expo-app-loading": "^1.0.1",
"expo-font": "^9.0.0",
"expo-status-bar": "~1.0.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.0.1",
"react-native-screens": "^2.18.1",
"react-native-web": "~0.13.12",
"react-navigation": "^4.4.4",
"react-navigation-header-buttons": "^7.0.0",
"react-navigation-stack": "^2.10.4",
"react-redux": "^7.2.3",
"redux": "^4.0.5"
},
"devDependencies": {
"#babel/core": "^7.13.15"
},
"private": true
}
I've already tried to remove node_modules, package-lock.json, and run npm install, but it didn't solved the problem.
Any idea will be appreciated.
Updating expo to version 41 solved this problem.
I'm new to React natives , i have this issue saying : Invariant Violation: ListView has been removed from React Native.
I'm not even using ListView on my project , i'll share with you my 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",
"postinstall": "cp node_modules/#expo/vector-icons/FontAwesome.js node_modules/#expo/vector-icons/Fontisto.js"
},
"dependencies": {
"babel-plugin-inline-import": "^3.0.0",
"expo": "~37.0.3",
"idx": "^2.5.6",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz",
"react-native-animatable": "^1.3.2",
"react-native-camera": "^2.11.0",
"react-native-country-picker-modal": "^0.7.1",
"react-native-gesture-handler": "^1.6.1",
"react-native-pose": "^0.9.1",
"react-native-reanimated": "^1.7.1",
"react-native-screens": "^2.2.0",
"react-native-tab-view": "^2.10.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "~0.11.7",
"react-navigation": "^3.11.0"
},
"devDependencies": {
"babel-preset-expo": "~8.1.0",
"#babel/core": "^7.8.6",
"babel-jest": "24.8.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.3"
},
"private": true
}
```
Thank you in advance.
ListView is a default Component.
You may use it in any Component.
It has been replaced by
new list components, such as FlatList or SectionList for bounded memory use, fewer bugs, better performance, an easier to use API, and more features.
You can read over this here:
ListView