React-native: How to control what keyboard pushes up - react-native

The structure of the app is fairly simple: A searchbar, a listview and react-native-tabs at the bottom. The problem: If I click on the searchbar on Android it pushes the whole app up, so I see the tabs directly over the keyboard. But on iOS the keyboard overlays the whole app, without pushing anything up. Is there any way to control that?
I'm happy to share code / screenshots if the question isn't clear.
Thanks
edit:
<View style={{flex:1, backgroundColor:'#f2f2f2'}}>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderSearchResults.bind(this)}
style={styles.listView}/>
<KeyboardAvoidingView
style={styles.addQuestionBar}
behavior={'position'}>
<Text>
Don't see your question?
</Text>
<TouchableOpacity>
<Text>
Add it
</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
</View>

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>

For those using Expo
#J KW's answer is correct but if you're using Expo you will have to implement it differently.
Expo uses different configuration terms. In your app.json you have to set the configuration key
"softwareKeyboardLayoutMode":"pan" in your android object.
Your file might look something like:
{
"expo": {
"name": "App",
...
"android":{"softwareKeyboardLayoutMode": "pan"},
...
}
}
Note: If you are receiving a "should NOT have additional property" error, it's likely because you don't have the updated Expo SDK (v.038). Please update your Expo version.
Documentation: https://docs.expo.io/workflow/configuration/

There is new Component called KeyboardAvoidingView from React Native not documented yet but i already use it in my project and its very useful
Code Example:
'use strict'
import { ... , KeyboardAvoidingView } from 'react-native'
class Test extends Component {
constructor () {
super()
this.state = {
behavior: 'position'
// there is three ways to adjust (position , height , padding )
}
}
render(){
return (
<View>
<KeyboardAvoidingView behavior={this.state.behavior}>
<TextInput
style={style.PhoneNumberInput}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
</KeyboardAvoidingView>
</View>
)
}
}
module.exports = Test
and for more details you can check KeyboardAvoidingViewExample
EDIT:
Sorry i just got the wrong idea from the question i think what you are trying to do is stop the android keyboard from pushing the application up here is component that allow you to choose between (Pan, Resize, Nothing) in android
react-native-android-keyboard-adjust

Use android:windowSoftInputMode="adjustResize".
KeyboardAvoidingView and other keyboard-related components don't work quite well if you have "adjustPan" set for your android:windowSoftInputMode in AndroidManifest.xml.
Instead, you should use "adjustResize" and have a wonderful life.
I had "adjustPan" and tried using KeyboardAvoidingView and KeyboardAwareScrollView... nothing worked.
Now, with "adjustResize", i'm not using any keyboard-related component and my android app works. (I might have to use KeyboardAvoiding view on iOS, but it will work out of the box.)

#binkie's answer worked for my expo (Version 44.0.0) app with a slight change.
In app.json,
"android":{"softwareKeyboardLayoutMode": "pan"}
In the screen, margin bottom value equal to height of the bottom tab like so
<ScrollView mb="70px">...</ScrollView>

****1) modify the AndroidMainfest.xml in
android/src/main/AndroidMainfest.xml
u can solve the issue by changing the
$ android:windowSoftInputMode="adjustResize";
to
$ android:windowSoftInputMode="adjustPan";
the problem will be resolvede****

Related

React Native KeyboardAvoidingView is not working as expected

The screen is Wrapped inside KeyboardAvoidingView and ScrollView components. Some of the last inputs are partially hidden by the keyboard. If I set the behaviour prop to anything, but undefined a white element comes up after keyboard. All I would like to do is to make the screen scroll down like 20 more pixels... I feel like I have tried everything so far, even setting the keyboardVerticalOffset prop, but nothing seems to work. If that offset was transparent it would be perfect...
In the following code a View component is passed to children prop
import { FunctionComponent, ReactNode } from 'react';
import { KeyboardAvoidingView, ScrollView } from 'react-native';
interface WrapperProps {
children: ReactNode;
}
const KeyboardAvoidingWrapper: FunctionComponent<WrapperProps> = ({children}) => {
return (
<KeyboardAvoidingView behavior='height' keyboardVerticalOffset={100}>
<ScrollView>
{children}
</ScrollView>
</KeyboardAvoidingView>
);
};
Instead, You can use react-native-keyboard-aware-scroll-view.
I solved my issue with: react-native-avoid-softinput
INSTALLATION:
yarn add react-native-avoid-softinput
On iOS additionally run: npx pod-install
USAGE:
import React from "react";
import { AvoidSoftInputView } from "react-native-avoid-softinput";
const MyComponent = () => {
return (
<AvoidSoftInputView>
{/** Content that should be pushed above the keyboard */}
</AvoidSoftInputView>
);
};
TROUBLESHOOTING:
requireNativeComponent: "AvoidSoftInputView" was not found in the UIManager.
Solution: https://stackoverflow.com/a/65513391/14056591
Try again cd ios && pod install
If it doesn't help, try restarting the simulator, delete and rebuild the app. Restarting Xcode and metro bundler is also a good idea.
If this does not solve your issue, I came across another promising library, but I did not get to use it: react-native-keyboard-controller

FlatList not working inside BottomSheet on Android

I am using gorhom/react-native-bottom-sheet
The issue I am facing:
I have a FlatList inside a BottomSheet, I am able to scroll in FlaLlist on ios but it is not working on android.
After a lot of research, I was able to resolve the issue by using BottomSheetFlatList instead of FlatList from the same package.
import { BottomSheetFlatList } from "#gorhom/bottom-sheet";
<BottomSheetFlatList
ref={ref}
initialNumToRender={3}
keyExtractor={(item) => item?.id}
showsVerticalScrollIndicator={false}
maxToRenderPerBatch={3}
windowSize={7}
data={dat}
renderItem={renderItem}
/>
By doing so, it started working fine on android too.
But as I also wanted my Flatlist to auto-scroll using ref on a particular event.
After some research and because of the great documentation of #gorhom/bottom-sheet. I found out the solution in the troubleshooting section of the docs.
But as a developer, StackOverflow is our first go-to place for every issue. So, I decided to post the answer here.
ANSWER
Due to wrapping the content and handle with TapGestureHandler & PanGestureHandler, any gesture interaction would not function as expected.
To resolve this issue, please use ScrollView & FlatList from react-native-gesture-handler provide instead react-native.
import {
ScrollView,
FlatList
} from 'react-native-gesture-handler';
find the original answer here-
https://gorhom.github.io/react-native-bottom-sheet/troubleshooting
Using raw-bottom-sheet raw-bottom-sheet and set "dragFromTopOnly" as true, and any touch operation can be performed i will mention
example below:
<RBSheet
ref={refRBSheet}
dragFromTopOnly={true}
customStyles={{
wrapper: {
backgroundColor: "transparent"
},
draggableIcon: {
backgroundColor: "#000"
}
}}
>`

Linking.openUrl not working with urls containing non english characters

I am using Linking from React-Native. Linking.OpenUrl seems to work with most urls but it does not seem to work with urls which have non-english characters. See the example below in Expo where I have reproduced the case. Note that if you click on the url link directly it will open properly. However, when the same link is being opened via the Linking.OpenUrl it does something to the url and lands in a 404 page.
Here is a repro in Expo:
https://snack.expo.dev/#rezahok/linking-not-working
I am using Expo 42. Any help with this would be really appreciated.
Try with below code
export default class App extends Component {
render() {
const uri = `https://www.prothomalo.com/bangladesh/district/%E0%A6%A6%E0%A6%BF%E0%A6%A8%E0%A6%BE%E0%A6%9C%E0%A6%AA%E0%A7%81%E0%A6%B0%E0%A7%87-%E0%A6%B0%E0%A7%87%E0%A6%B2%E0%A6%95%E0%A7%8D%E0%A6%B0%E0%A6%B8%E0%A6%BF%E0%A6%82%E0%A7%9F%E0%A7%87-%E0%A6%AC%E0%A7%8D%E0%A6%AF%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF%E0%A6%97%E0%A6%A4-%E0%A6%97%E0%A6%BE%E0%A7%9C%E0%A6%BF%E0%A6%95%E0%A7%87-%E0%A6%9F%E0%A7%8D%E0%A6%B0%E0%A7%87%E0%A6%A8%E0%A7%87%E0%A6%B0-%E0%A6%A7%E0%A6%BE%E0%A6%95%E0%A7%8D%E0%A6%95%E0%A6%BE-%E0%A6%A8%E0%A6%BF%E0%A6%B9%E0%A6%A4-%E0%A7%A9`
const decodedUri = decodeURIComponent(uri);
return (
<View style={styles.container}>
<Button title="Click me" onPress={ ()=>{ Linking.openURL(decodedUri)}} />
</View>
);
}
}

How to use videos in react native snap carousel? Perhaps another better carousel package for react native?

Is it possible to add Video component into the react-native-snap-carousel? I want to try to create a carousel similar to Instagram's swipe
I was able to get swiping to work, but when I tried to add the video component from expo, it didn't show up.
const _renderItem = ({item, index}) => {
return (
<View>
<Video uri={item.uri}/>
<Text>{index} What are we trying to accomplish here {item.uri}</Text>
<ComponentVideo uri={item.uri} />
</View>
);
}
<ComponentVideo /> is another component I created, works normally. <Video /> is a component from expo that's inside ComponentVideo. I just brought it out to see if it works.
Thoughts?
Perhaps there's another package I should check out?

Use <Image> with a local file

The documentation says that the only way to reference a static image is to use require.
But I'm not sure where does react expect to have those images. The examples don't have any domain, so it seems like you have to go to Xcode and add them to Images.xcassets, but that didn't work for me.
Using React Native 0.41 (in March 2017), targeting iOS, I just found it as easy as:
<Image source={require('./myimage.png')} />
The image file must exist in the same folder as the .js file requiring it for "./" to work.
I didn't have to change anything in the XCode project. It just worked.
Note that the path seems to have to start with "./" or "../" and be full lower case. I'm not sure what all the restrictions are, but start simple and work forward.
Hope this helps someone, as many other answers here seem overly complex and full of (naughty) off-site links.
UPDATE: BTW - The official documentation for this is here:
https://reactnative.dev/docs/images
It works exactly as you expect it to work. There's a bug https://github.com/facebook/react-native/issues/282 that prevents it from working correctly.
If you have node_modules (with react_native) in the same folder as the xcode project, you can edit node_modules/react-native/packager/packager.js and make this change: https://github.com/facebook/react-native/pull/286/files . It'll work magically :)
If your react_native is installed somewhere else and the patch doesn't work, comment on https://github.com/facebook/react-native/issues/282 to let them know about your setup.
ES6 solution:
import DefaultImage from '../assets/image.png';
const DEFAULT_IMAGE = Image.resolveAssetSource(DefaultImage).uri;
and then:
<Image source={{uri: DEFAULT_IMAGE}} />
If loading images dynamically one can create a .js file like following and do require in it.
export const data = [
{
id: "1",
text: "blablabla1",
imageLink: require('../assets/first-image.png')
},
{
id: "2",
text: "blablabla2",
imageLink: require('../assets/second-image.png')
}
]
In your component .js file
import {data} from './js-u-created-above';
...
function UsageExample({item}) {
<View>
<Image style={...} source={item.imageLink} />
</View>
}
function ComponentName() {
const elements = data.map(item => <UsageExample key={item.id} item={item}/> );
return (...);
}
I had this exact same issue until I realized I hadn't put the image in my Image.xcassets. I was able to drag and drop it into Xcode with Image.xcassets open and after rebuilding, it fixed the problem!
To display image from local folder, you need to write down code:
<Image source={require('../assets/self.png')}/>
Here I have put my image in asset folder.
From the UIExplorer sample app:
Static assets should be required by prefixing with image! and are located in the app bundle.
So like this:
render: function() {
return (
<View style={styles.horizontal}>
<Image source={require('image!uie_thumb_normal')} style={styles.icon} />
<Image source={require('image!uie_thumb_selected')} style={styles.icon} />
<Image source={require('image!uie_comment_normal')} style={styles.icon} />
<Image source={require('image!uie_comment_highlighted')} style={styles.icon} />
</View>
);
}
I was having trouble with react-native-navigation, I created my own header component, then inserted a image - as logo - on the left before title, then when I was triggering navigate to another screen and then back again, logo was loading again, with a timeout near 1s, my file were local. My solution :
Logo.json
{"file" : "base64 big string"}
App.js
import Logo from '.../Logo.json'
...
<Image source={{uri:Logo.file}} />
We can do like below:
const item= {
image: require("../../assets/dashboard/project1.jpeg"),
location: "Chennai",
status: 1,
projectId: 1
}
<Image source={item.image} style={[{ width: 150, height: 150}]} />
This from https://github.com/facebook/react-native/issues/282 worked for me:
adekbadek commented on Nov 11, 2015
It should be mentioned that you don't have to put the images in Images.xcassets - you just put them in the project root and then just require('./myimage.png') as #anback wrote
Look at this SO answer and the pull it references
For typescript user
import { ImageSourcePropType } from 'react-native'
type Data = {
image:ImageSourcePropType
}
const data:Data = {
image:require('../.../log.png')
}
and then
<Image source={data.image}/>
You have to add to the source property an object with a property called "uri" where you can specify the path of your image as you can see in the following example:
<Image style={styles.image} source={{uri: "http://www.mysyte.com/myimage.jpg"}} />
remember then to set the width and height via the style property:
var styles = StyleSheet.create({
image:{
width: 360,
height: 40,
}
});