On Android it takes the name of the file and you are done. On iOS however it is a bit more complex. There are a few steps you should take: Double check the font files are included in the Target in XCode Make sure they are included in the step “Copy Bundle Resources” (add files, … Read more
Warning: react-navigation changes a lot, the way to do title align, already changed for like 2-3 times from my first answer of it. If my answer doesn’t work for you, please see other answers. Modified 2021/08/31: In year of 2020, headerLayoutPreset was also deprecated. The new way is via defaultNavigationOptions: (@ThatFrenchComputerGuy’s answer helped me) const … Read more
If you are using react-navigation, this is affected by the header of the react-navigation. The height of the header is vary on different mobile screen. So you have to get the height of the header and pass into the keyboardVerticalOffset props. import * as React from ‘react’ import { KeyboardAvoidingView } from ‘react-native’ import { … Read more
There is no way to subscribe to part of the store when using subscribe directly, but as the creator of Redux says himself – don’t use subscribe directly! For the data flow of a Redux app to really work, you will want one component that wraps your entire app. This component will subscribe to your … Read more
Adding the CSS property elevation: 1 renders shadow in Android without installing any 3rd party library. elevation is an Android-only style property available on the View elements. See: React Native Docs for the elevation style property If you’re open to 3rd party software, another way to get shadows for android is to install react-native-shadow. Example … Read more
Here is a complete working solution: import React, { Component } from ‘react’; import { WebView, Linking } from ‘react-native’; export default class WebViewThatOpensLinksInNavigator extends Component { render() { const uri = ‘http://stackoverflow.com/questions/35531679/react-native-open-links-in-browser’; return ( <WebView ref={(ref) => { this.webview = ref; }} source={{ uri }} onNavigationStateChange={(event) => { if (event.url !== uri) { this.webview.stopLoading(); … Read more
Set android:windowSoftInputMode=”adjustPan” in your manifest file, and it will work as you expect. E.g. <application android:name=”.MainApplication” android:allowBackup=”true” … <activity android:name=”.MainActivity” android:label=”@string/app_name” … android:windowSoftInputMode=”adjustPan”> … </activity> … </application>
Thank you guys for your answers. Here is the hooks version if someone is interested: const [isKeyboardVisible, setKeyboardVisible] = useState(false); useEffect(() => { const keyboardDidShowListener = Keyboard.addListener( ‘keyboardDidShow’, () => { setKeyboardVisible(true); // or some other action } ); const keyboardDidHideListener = Keyboard.addListener( ‘keyboardDidHide’, () => { setKeyboardVisible(false); // or some other action } ); … Read more
Use style={{ aspectRatio: 3/2 }} for a horizontal image with width to height ratio of 3:2. Docs: https://reactnative.dev/docs/layout-props#aspectratio (Available in RN 0.40+)
Your border radius should be a half of width and your height. like below: circle: { width: 44, height: 44, borderRadius: 44/2 }