I want to know how I can make a keyboard aware scrollview without using the popular library, because that is currently giving me a bug when using "controlled" TextInputs within the KeyboardAwareScrollView
Has anyone managed to pull this off? Perhaps with the KeyboardAvoidingView?
The solution has to work on both iOS and Android
You can make use of KeyboardAvoidingView component. Import it from the 'react-native' along with all other components you need and keep your UI within that component.
for example,
import {KeyboardAvoidingView} from 'react-native'
export default class App extends React.Component{
render(){
return(
<KeyboardAvoidingView behavior="padding">
Your UI
</KeyboardAvoidingView>
);
}
}
Don't forget to add the prop behaviour="padding". It worked for me on android device. I don't have an iPhone to test it, but hope it would work.
Take a loot at this this link for further information. Hope this helped.
Related
import React from "react";
import AppLoading from "expo-app-loading";
export default function App() {
return <AppLoading />;
}
Isn't the above code supposed to show the splash screen to me? All I get is a white screen. Would really appreciate knowing what I did wrong here.
I have splash.png in my assets folder.
My app.json file:
{
"expo": {
...
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#e2fcff"
},
...
}
}
The code you have shown looks fine. However, there's more to it.
It's quite unclear to me what is actually supposed to work and not. For me, who runs a custom-managed workflow, AppLoading works when I prebuild android/ios and run the standalone app. When I run in Expo Go app I simply see a blank screen instead of the splash screen.
People have discussed if AppLoading works in bare workflow and according to Expo's sdk it should. It also works for me with a prebuild, so bare workflow is supported (in Expo SDK 42).
I have seen no mentions about showing a splash screen within the Expo Go app though, so can't tell whether that is supported or not.
And then web... Once again, not sure if it should work or not - it doesn't for me. It shows a blank page while loading. And in the fonts guide there is an Expo snack which uses AppLoading that shows a splash screen on Android but merely a blank page on web. The AppLoading docs claims it has support for web. If that means it won't crash, or actually display a splash screen image is left untold. The AppLoading docs further claims it uses SplashScreen to show the splash screen, which doesn't have web support. So, I suppose there's nothing such a splash screen for web (which wouldn't surprise me, because splash screens are uncommon on web).
Personally, I'm fine with Android/iOS support for standalone apps. I only use Expo Go for testing. Furthermore, the splash screen I will use for mobile devices won't work well on web anyway. The skeleton I will show won't look the same as the web version, so I would rather implement at custom splash screen for web.
Summary for AppLoading support:
Managed and bare workflow are both supported.
It works on standalone apps.
Not sure if it will display the splash screen in Expo Go app.
Web appears to fallback to displaying a blank page.
If I'm wrong somewhere, or if someone knows if AppLoading works in Expo Go App, please fill me in!
App loading documentation In the documentation, it says that you need to provide additional arrugments
export default function App() {
const [isLoading, setLoading] = useState(true);
if (isLoading) {
return(
<AppLoading
startAsync={() => console.log('starting')}
onFinish={() => { setTimeout(() => {setLoading(false)}, 1000) }}
onError={(err) => {console.log(err)}}
/>
)
}
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
How to make https://xr-spinosaurus.glitch.me/ work in a React Native WebView Component?
import React, { Component } from 'react';
import { WebView } from 'react-native';
export default class MyWeb extends Component {
render() {
return (
<WebView
source={{uri: 'https://xr-spinosaurus.glitch.me/'}}
style={{marginTop: 20}}
/>
);
}
}
Right now adding this to react-native only shows VR option but not AR option.
If you access the link directly you could see VR and AR options but I couldn't find the AR option when run in a Web View component inside React-Native
But the same AR option is available if I directly access the link on an ARCore supported Device.
How to make this code also show the AR option in React-Native?
AFAIK that is currently not possible, since the Android WebView doesn't (yet) support the WebXR Device API (and neither on apple). Source: https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API
I've been running into the same problem, hopefully support will be added soon, but for now there's not much you can do.
Hell, I'm trying to create a tab bar in my react native app, but after importing it, it appears it's always undefined. Has this component been deprecated? I still see it listed in the docs. https://facebook.github.io/react-native/docs/tabbarios.html
import React, { Component } from 'react';
import {
TabBarIOS
} from 'react-native';
export default class App extends Component {
render() {
return (
<TabBarIOS/>
);
}
}
I'm using react-native 0.59.3
Looks like this has been removed as part of a core cleanup effort. There doesn't appear to be any native alternative that also behaves correctly on tvos.
https://github.com/facebook/react-native/commit/02697291ff41ddfac5b85d886e9cafa0261c8b98
I've gone ahead and extracted TabBarIOS out into a native module for anyone looking for this.
https://github.com/modavi/NativeIOS
install instructions:
npm install git+https://github.com/modavi/NativeIOS#master
react-native link native-ios
I try use code:
import {BackHandler} from 'react-native';
onPress = () => {
BackHandler.exitApp()
}
BackHandler not working on Android
BackHandler not working on IOS ?
BackHandler is specifically for Android and tvOS functions and is not applicable in iOS apps. It is meant to detect hardware back button presses and iOS devices don't have a hardware back button.
It looks like you are trying to close the app on a button press, but this is not a very common pattern for iOS apps so maybe reconsider if you need it in your app. However, if you need this functionality, you can use react-native-exit-app to programmatically exit the application.
For Android, Use BackAndroid to exit the App
import React, {
BackAndroid,
} from 'react-native';
BackAndroid.exitApp();
I'm coming from Ionic 2 where I write my code once, and it runs everywhere.
According to this page https://facebook.github.io/react-native/docs/platform-specific-code.html "When building a cross-platform app, you'll want to re-use as much code as possible."
How can I "reuse" code across iOS and Android in ReactNative? In the starter app I see two files: index.ios.js and index.android.js. Is there something like index.js that I can use for sharing across platforms?
It seems like there should be one file for shareable code, since that web page mentioned above also shows how you can use the Platform module to check what OS you are on.
I realize that sometimes you need different behavior on different platforms, but, assuming that my app is simple enough, and my code ends up exactly the same on both platforms, do I have to copy/paste from one to the other? How can I pull same-functionality into it’s own file to be shared on both platforms?
What am I missing?
Thanks!
Here's what you can do. Create a file say main.js that will act as your root page.
main.js
import React, { Component } from 'react';
import { Text } from 'react-native';
export default class Main extends Component {
render() {
return (
<Text>Hello world! from both IOS and Android</Text>
);
}
}
Now on your index.android.js and index.ios.js import that main file and register your Main component as root using AppRegistry.
index.android.js and index.ios.js
import React from 'react';
import {
AppRegistry
} from 'react-native';
import Main from './main';
AppRegistry.registerComponent('DemoApp', () => Main);
if you run react-native run-android and react-native run-ios the Main component will be rendered for both the platforms.
All of the Components with No IOS and Android suffix works for both platforms. Like Navigator works for both ios and android but NavigatorIOS works only for ios. So you'll have to make sure that you're using the cross platform components.
If you need to use platform specific components, then you can use platform detection login to do so:
import { Platform } from 'react-native';
if(Platform.OS === 'ios').....
or
if(Platform.OS === 'android')...