I see that react-native has TextInput, ListView, MapView ..... I'm not asking where is the Button. I know I can download react-native-button from npm, but the lack of a "native" button in react-native makes me wonder if I'm approaching react-native the wrong way. Is there some other paradigm I should be using on react-native apps and NOT using a button is the way to go?
Should I just be using the onPress for a View with TouchableOpacity?
Still trying to wrap my head around how to think in react-native.
The Touchable* components( TouchableOpacity/TouchableHighlight/TouchableWithoutFeedback) are React-Native's button
It has all the properties a View has. You have either wrap a View inside a Touchable component or just simply substitute the View with a Touchable component
<View style={{height:48,width:200,backgroundColor:'blue'}} />
can just be made into a button by
<TouchableOpacity onPress={this.onPress} style={{height:48,width:200,backgroundColor:'blue'}} />
Related
I want to achieve this effect in react-native, Is there a component that achieves this or can this can be done using Animated View ?
I want to only to create the custom tab component, with this sliding animation when switching between them
If you mean TopTabs and use react-navigation to navigate around your app you can use the TopTabNavigator from react-native. Otherwise this can be done with React Animated
I have a TextInput on an Overlay Component in my app. When the keyboard is opened, half the screen gets covered, including the TextInput. I did try the KeyboardAvoidingView component, but couldn't get the TextInput to be fully visible. I need some suggestion on how to move the components inside the Overlay, when the keyboard is enabled in react-native
it wld have been easier to answer if u had posted code, but still
keyboardAvoidview solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its position or bottom padding based on the position of the keyboard
just add this under your largest view
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
all ur ui inside this...
</KeyboardAvoidingView>
There is a prop called keyboardVerticalOffset,
that is the distance between the top of the user screen and the react native view.
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled keyboardVerticalOffset={offsetValue}>
... your UI ...
</KeyboardAvoidingView>;
Value for keyboardVerticalOffset may be non-zero in some use cases. but for your case try to add some value.
If you want to know more about handling keyboard in react native check this
I'm developing an app for Android in react-native with expo. I'm using expo's Audio.Sound API in order to play different sounds in my app. What annoys me is that whenever I press a TouchableOpacity component I get both my sound and the default onPress sound from Android (it disappears only if I mute the sound from the hardware buttons of my phone). I'd like to disable the default sound. Is there a way to do this programatically from react-native code?
You can actually use touchSoundDisabled={true} which is not covered in TouchableOpacity docs, but is part of a Button component. But it still works for touchables as well
I had the exact same problem using TouchableWithoutFeedback. The touchable events always play the default android button noise when clicked.
The solution I found was to instead use the onStartShouldSetResponder prop of the View component. This basically turns a view into a button and is equivalent to the 'onPress' prop.
<View onStartShouldSetResponder={() => this.onPress()}/>
Use Pressable instead of TouchableOpacity and add android_disableSound={true}
<Pressable android_disableSound={true} onPress={() => {}}
Though the keyboard popup for the first time, when I navigate to the same interface text input field is focused but the keyboard is not popup in React Native Application.
I used autoFocus={ true } but I can't see the keyboard. How to resolve this.
You can use 'push' instead of 'navigate'. When navigating to the same interface componentWillMount/componentDidMount is not loading again. That may be the issue. Try with this.
Refer react navigation documentation.
React Navigation Documentation
If you are using ScrollView, add keyboardShouldPersistTaps="always"
<ScrollView keyboardShouldPersistTaps="always">
------
</ScrollView>
I have this particular component above a Flatlist which renders my cards, and I want to make them both scrollable. I tried to nest them with a ScrollView:
<ScrollView>
<MainImage/>
<FlatList />
</ScrollView>
It works but my flatlist lost its ability to constrain memory, since I have a lot of data to render the app lags till crash.
If remove the ScrollView from my MainImage component it gets stuck on the screen and the cards scrolls behind it which is not cool.
<View>
<MainImage/>
<FlatList/>
</View>
How do I do to both components be able to scroll without losing performance?
obs: I'm using version 0.55 of react native
You can also use collapsible navbar above the flatlist rather than using separate MainImage Component. People are doing that and example is given in this link (https://medium.com/appandflow/react-native-collapsible-navbar-e51a049b560a)