Develop Reference

Keyboard covers input text (one long vertical input), text also runs off the screen without actively being scrolled to (react native)

It's been 7 hours, I've read all the docs and similar SO questions, so any help would be appreciated.
My goal: have an app screen where the top 1/3 of the screen is made up of custom components (not the problem), and then the bottom 2/3 of the screen is a giant full-width super-long scrollable textfield for the user to enter several paragraphs (the problem)
The problem: Either the on-screen keyboard covers the text from the textfield, the textfield isn't scrollable, or when typing and you go off the bottom of the screen you aren't scrolled along with what you're typing - or a mix of all the 3.
Here is a rough image of what I desire:
Currently, my code looks like this:
export default function Post() {
const [text, setText] = useState("");
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<SafeAreaView >
<KeyboardAvoidingView enabled behavior='height' keyboardVerticalOffset={40} >
<View>
<TextInput scrollEnabled={true} placeholderTextColor={LIGHT} maxLength={300000} placeholder="enter text" multiline={true} onChangeText={(newVal) => setText(prev => {prev + newVal})} value={text}/>
</View>
</KeyboardAvoidingView>
</SafeAreaView>
</TouchableWithoutFeedback>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: WHITE,
alignItems: 'center',
justifyContent: 'flex-center',
alignItems: "center",
marginHorizontal: 15,
// height: "100%",
},
textfield: {
textAlign: "left",
textAlignVertical: "top",
backgroundColor: "lavender",
height: "100%",
flex: 1,
},
scroll: {
// width: "100%"
}
});

Couple of issues with your approach and code in general.
textfield isn't scrollable
Placing anything scrollable inside a touchable is really weird and rarely behaves as you expect it, so avoid if possible, or if you really need it then pass a onStartShouldSetResponder={() => true} to your inner scroll view. But in your case, I suspect you don't actually want the keyboard to close if the user clicks inside the textInput, do you? He probably wants to add a word to a previous sentence or fix a type. Instead I suggest catching the touch outside of the textInput only, e.g. in your top third. Something like this (scrabble snack) should work:
import React, { useState } from 'react';
import { Text, View, StyleSheet, Touchable, TouchableWithoutFeedback, SafeAreaView, KeyboardAvoidingView, TextInput, Keyboard } from 'react-native';
export default function App() {
const [text, setText] = useState("");
return (
<KeyboardAvoidingView style={{flex: 1, marginTop: 45}} behavior="padding">
<View style={styles.upperContainer} onTouchStart={Keyboard.dismiss}>
<Text>My content in top third </Text>
</View>
<View style={styles.lowerContainer}>
<TextInput
scrollEnabled={true}
placeholderTextColor={"lightgrey"}
maxLength={300000}
placeholder="enter text"
multiline={true}
onChangeText={(newVal) => setText(prev => {prev + newVal})}
value={text}
/>
</View>
</KeyboardAvoidingView>
);
}
const styles = StyleSheet.create({
upperContainer: {
flex: 1,
borderWidth: 2,
borderColor: "grey",
alignItems: "center",
justifyContent: "center"
},
lowerContainer: {
flex: 2,
borderColor: "black",
borderWidth: 2,
padding: 10
}
})
Notice how I pass flex 1 and 2 to the two child views to style them how you required it. The border is just added for better visibility.

React Native: How does this Component call?

Can someone help me with this Component, i want to make like this, but dont know how this white frames called? Can someone tell me this? And if we press that yellow Touchable Opacity it is showing whole Text, and if we press again it will became smaller!
Thanks in Advance , I am Just new in RN

You can easily create that card with a little bit of CSS.
Below is the sample app which shows you how you can achieve that.
Working Example: Expo Snack
import React, { useState, useEffect } from 'react';
import {
Text,
View,
StyleSheet,
FlatList,
Image,
TouchableOpacity,
} from 'react-native';
import { AntDesign } from '#expo/vector-icons';
import Constants from 'expo-constants';
import { newsFeed } from './news';
export default function App() {
const [news, setNews] = useState(newsFeed);
const showFull = (index) => {
const temp = [...news];
temp[index].toggle = !temp[index].toggle;
setNews(temp);
};
return (
<View style={styles.container}>
<FlatList
data={news}
renderItem={({ item, index }) => (
<View style={styles.card}>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.paragraph}>
{item.toggle ? item.desc : `${item.desc.substr(0, 100)}...`}
</Text>
{item.toggle && (
<Image source={{ uri: item.img }} style={styles.img} />
)}
<View style={styles.bottomBar}>
<Text style={styles.date}>4/02/2021</Text>
<TouchableOpacity onPress={() => showFull(index)}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Text style={styles.moreBtn}>
{!item.toggle ? 'More' : 'Less'}
</Text>
<AntDesign
name={item.toggle ? 'up' : 'down'}
size={12}
color="orange"
/>
</View>
</TouchableOpacity>
</View>
</View>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
bottomBar: {
marginVertical: 5,
flexDirection: 'row',
justifyContent: 'space-between',
},
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
card: {
padding: 10,
backgroundColor: 'white',
marginVertical: 5,
borderRadius: 10,
},
title: {
marginVertical: 5,
fontSize: 18,
fontWeight: 'bold',
},
img: {
flex: 1,
height: 100,
borderRadius: 10,
marginVertical: 5,
},
paragraph: {
fontSize: 14,
},
date: {
fontSize: 12,
color: 'rgba(21,21,21,0.5)',
},
moreBtn: {
fontSize: 12,
color: 'orange',
marginRight: 10,
},
});

actually this card is not a component you can design it using css and if you want to create a component which you can reuse then you can make one component and reuse it as you want and for this card either you can use your own css or a library called native-base which is
like bootstrap but it is used in react-native
you can read about native base here for more information
https://nativebase.io/
and if you want to create card of your own then make a separate file and make a funcional card component in it
and call it wherever you like
import myCustomCard from './card'
and to use it you use like this in your jsx
<myCustomCard />
and if you want to know more about how to pass props and else you can checkout official docs of the react native here
https://reactnative.dev/docs/getting-started

Unable to create round shape button in react native

I want to create round shape button for my app which is build upon react native. I had tried the code below but both of them didn't work out for me.
Code snippet 1: <Button title="+" rounded="true"/>
Code snippet 2: addButton: {
width: 20,
height: 20,
borderRadius: 40
}

Basically, you have to style up Views and Touchables to look like the button you want. Here's an example of a circular button component:
import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
export default ({ title, onPress }) => <TouchableOpacity onPress={onPress} style={styles.button}>
<Text style={styles.title}>{title}</Text>
</TouchableOpacity>
const styles = StyleSheet.create({
button: {
width: 50,
height: 50,
borderRadius: 25,
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
},
title: {
color: 'white',
}
})

React Native - TouchableOpacity causing app to crash on Android

I have a simple component that toggles between two sets of items - Hours & Happy Hours. The component works fine on iOS, but causes my app to crash (silently) on Android.
I have a working example here: https://snack.expo.io/Sk92sIEmf. And here is the code used, for reference:
import React, { Component } from 'react';
import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
const { width } = Dimensions.get('window');
export default class App extends Component {
constructor(props){
super(props);
this.state = {
showAnother: true,
oneThingActive: false,
anotherActive: true,
};
}
handlePress = () => {
const { anotherActive, oneThingActive } = this.state
return this.setState({ anotherActive: !anotherActive, oneThingActive: !oneThingActive });
}
render() {
const { showAnother, oneThingActive, anotherActive } = this.state
return (
<View style={s.container}>
<View style={s.sRow}>
<TouchableOpacity style={s.titleCont} activeOpacity='1' onPress={this.handlePress}>
<Text style={[s.text, s.title, !oneThingActive && s.inactive]}>ONE THING</Text>
</TouchableOpacity>
{ showAnother &&
<Text style={[s.text, s.title]}>|</Text>
}
{ showAnother &&
<TouchableOpacity style={s.titleCont} activeOpacity='1' onPress={this.handlePress}>
<Text style={[s.text, s.title, !anotherActive && s.inactive]}>ANOTHER</Text>
</TouchableOpacity>
}
</View>
{ oneThingActive &&
<View style={s.row}>
<Text style={[s.text, s.day]}>testing..</Text>
</View>
}
{ anotherActive &&
<View style={s.row}>
<Text style={[s.text, s.day]}>123..</Text>
</View>
}
</View>
)
}
}
const s = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
marginHorizontal: 35,
marginVertical: 5,
borderColor: '#D4D4D4',
borderTopWidth: 1,
borderBottomWidth: 1,
},
titleCont: {
alignSelf: 'flex-start',
},
title: {
color: '#232323',
fontSize: 14,
alignSelf: 'flex-start',
marginHorizontal: 5,
},
text: {
color: '#232323',
fontSize: 13,
},
inactive: {
color: '#95989A',
},
row: {
display: 'flex',
flexDirection: 'row',
},
sRow: {
display: 'flex',
flexDirection: 'row',
width: width,
alignItems: 'center',
justifyContent: 'center',
paddingBottom: 5,
},
})
As stated earlier, I don't really get an error when this crashes. At one point, I saw something to the effect of "attempted to assign read only property," but I am no longer seeing that error message. Any help or a point in the right direction would be greatly appreciated.
Thanks !
Edit:
Updated with a simplified example. It seems the crash is coming from the conditional render (this.state.oneThingActive && ...), a pattern I frequently use and have not run into any issues like this with.
The best way to reproduce is to visit this link: https://snack.expo.io/Sk92sIEmf, which has an IDE setup for React Native apps. You should find that the toggle works fine when the Platform is iOS, but once a state change is attempted in the Android version the app crashes.
Edit 2:
Seems the problem was due to the usage of TouchableOpacity.... I noticed the Android app was crashing from a console.log("..."), so I tried swapping in TouchableHighlight and got it to work.
Going to investigate this more over the coming days, but would love to hear input if anyone has some.
Answer
This all seems a bit silly now, but my error was getting caused by activeOpacity='1'. I was passing in 1 as a String instead of as a Number. activeOpacity={1}does the trick. Do yourself a favor (unlike me in this instance) and use a linter.

I just encountered the same thing. In my case it was an issue of it not liking quotes in my style. Not sure about your case, but in my case when I added a
style={{marginRight: "20px"}}
by mistake it crashed. I should have had
style={{marginRight: 20}}
instead. Even just having
style={{marginRight: '20'}}
or
{{marginRight: "20"}}
causes it to crash.
I notice that you have activeOpacity='1' in your code and am wondering if you remove the quotes around the 1 whether it solve your problem.

This looks like a problem with the fact that class methods are not automatically bound to the instance. Add these to your constructor:
this.hoursPressed = this.hoursPressed.bind(this);
this.happyHoursPressed = this.happyHoursPressed.bind(this);
This is a common problem with using ES6 classes with React.

How to add a button in React Native?

I´m confused with this whole "no CSS" thing, but I understand why it's beneficial. All I want to do is place a button in the middle of the screen but I don't understand how styling works in React yet. This is my code:
var tapSpeed = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Tap me as fast as you can!
</Text>
<View style={styles.button}>
!
</View>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFCCCC'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10
},
button: {
textAlign: 'center',
color: '#ffffff',
marginBottom: 7,
border: 1px solid blue,
borderRadius: 2px
}
});

Update: use built-in Button component.
Deprecated:
Wrap your View into TouchableHighlight for iOS and TouchableNativeFeedback for Android.
var {
Platform,
TouchableHighlight,
TouchableNativeFeedback
} = React;
var tapSpeed = React.createClass({
buttonClicked: function() {
console.log('button clicked');
},
render: function() {
var TouchableElement = TouchableHighlight;
if (Platform.OS === 'android') {
TouchableElement = TouchableNativeFeedback;
}
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Tap me as fast as you can!
</Text>
<TouchableElement
style={styles.button}
onPress={this.buttonClicked.bind(this)}>
<View>
<Text style={styles.buttonText}>Button!</Text>
</View>
</TouchableElement>
</View>
);
}
});

You can use built in react-native Button element.
import React, { Component } from 'react';
import { StyleSheet, View, Button, Alert, AppRegistry } from 'react-native';
class MainApp extends Component {
_onPress() {
Alert.alert('on Press!');
}
render() {
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Button onPress={this._onPress} title="Hello" color="#FFFFFF" accessibilityLabel="Tap on Me"/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF'
},
buttonContainer: {
backgroundColor: '#2E9298',
borderRadius: 10,
padding: 10,
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 3
},
shadowRadius: 10,
shadowOpacity: 0.25
}
})
AppRegistry.registerComponent('MainApp', () => MainApp);
Read More Here.

The react-native-button package provides a button that is styled like a native button. Install it with npm install react-native-button and use it in your component like this:
var Button = require('react-native-button');
var ExampleComponent = React.createClass({
render() {
return (
<Button
style={{borderWidth: 1, borderColor: 'blue'}}
onPress={this._handlePress}>
Press Me!
</Button>
);
},
_handlePress(event) {
console.log('Pressed!');
},
});

You have two options to achieve a touchable component/button to handle user's events.
One is to use the built in Button Component. Check the docs here http://facebook.github.io/react-native/docs/button.html
Two use either TouchableHighlight or TouchableNativeFeedback or TouchableOpacity or TouchableWithoutFeedback. Think of this as a way for you to convert different areas of your app to tappable(clickable) or a way for you to create a custom button.
Each component here is different based on how it behaves once it's tapped by the user. Check the docs for more details. http://facebook.github.io/react-native/docs/touchablewithoutfeedback.html etc.
Concerning styling in react native you will need to understand flexbox layout. Check this css flexbox article all rules are applicable to react-native https://css-tricks.com/snippets/css/a-guide-to-flexbox/ except that you will have to capitalize the rules e.g align-content to alignContent

<Button
onPress={onPressLearnMore}
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>

Please check react-native doc's regarding the buttons
You have more than one way to add button in your application and styling it
You can use Button tag and it's have only one way styling by color attribute, it will appearing in IOS different than Android, or by putting button in view tag with style
<View style={style.buttonViewStyle}>
<Button title="Facebook" color="blue" onPress={this.onFacebookPress} />
</View>
And check the TouchableOpacity and TouchableNativeFeedback tags
And take a lock on below link for more options to add custom buttons in your app
https://js.coach/react-native/react-native-action-button?search=button

export default class Login extends React.Component {
barcodeAction = () => {
this.props.navigation.navigate('BarCodeScanner')
}
cleverTapAction = () => {
this.props.navigation.navigate('CleverTapApp')
}
}
render() {
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Button
onPress={this._onPressButton}
title="Press Me"
/>
</View>
<View style={styles.buttonContainer}>
<Button
onPress={this._onPressButton}
title="Press Me"
color="#841584"
/>
</View>
<View style={styles.alternativeLayoutButtonContainer}>
<Button
onPress={this._onPressButton}
title="This looks great!"
/>
<Button
onPress={this._onPressButton}
title="OK!"
color="#841584"
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
buttonContainer: {
margin: 20
},
alternativeLayoutButtonContainer: {
margin: 20,
flexDirection: 'row',
justifyContent: 'space-between'
}
});

The Button element from react-native package does not provide built in styling feature. Ex. The "title" props will be in upper case by default. Hence, I've used an another package react-native-elements that provides nice features for Button element along with different styling options.
You can refer more details on Button from react-native-elements

import React, { Component } from 'react';
import { StyleSheet, View, TouchableOpacity, Text} from 'react-native';
var tapSpeed = React.createClass({
render: function() {
return (
<View style={styles.container}>
<TouchableOpacity>
<Text style={styles.welcome}>
Tap me as fast as you can!
</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Text>!</Text>
</TouchableOpacity>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
backgroundColor: '#FFCCCC'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
alignSelf: 'center'
},
button: {
justifyContent: 'center',
alignItems: 'center',
marginBottom: 7,
border: 1px solid blue,
borderRadius: 2px
}
});