Develop Reference

How to: Icon/Image constantly appear over scroll-sections like in twitter?

So I would like to have an button or vector-icon simular to twitters one like in this image: twitter button
So the concept is like in this picture: concept
The black rectangles represent the scrollable sections which is basicalle a scrollview. Now I would like to make an icon/picture appear over all these sections constantly like in twitter. In my second picture that would be the blue star. I havent found simmlular concepts yet. How can I implement that in React Native?

You can try something like this:
import React, { PureComponent } from 'react'
import { View, ScrollView } from 'react-native'
export default class Example extends PureComponent {
render() {
return (
<View style={{ flex: 1 }}>
<ScrollView>
{/* Children */}
</ScrollView>
<TouchableOpacity
activeOpacity={0.6}
style={{
position: 'absolute',
right: 20,
bottom: 60
}}
// onPress={this.onAddPress}
>
{/* Provide icon source here */}
<Image source={iconSource} />
</TouchableOpacity>
</View>
)
}
}
If you need this bottom picture to be on every screen, then you can place this TouchableOpacity component to all of those screen but outside of the ScrollView.

you can use Fab button available in native-base and react-native-paper
[native-base] https://docs.nativebase.io/Components.html#fabs-def-headref
[reac-native-paper] https://callstack.github.io/react-native-paper/fab.html
If you want non-touchable custom fab then use can use given code
<View style={{position:'absolute', zIndex:99, bottom:15, right:15}}>
<FontAwesome name="star" color={"blue"} size={25} />
</View>
If you want touchable custom fab then use can use given code
<TouchableOpacity onPress={()=>/*submit code*/} style={{position:'absolute', zIndex:99, bottom:15, right:15}}>
<FontAwesome name="star" color={"blue"} size={25} />
</TouchableOpacity>

Touchable Opacity not responding in stack navigator screen - React Native

I'm building a React Native app, it uses React Navigation. I use TouchableOpacity throughout the app, however, in a stack navigator screen, it doesn't seem to work at all. Touching the element doesn't change the opacity and the onpress function doesn't work. The screen itself displays fine and all other screens in my app have TouchableOpacity's that work fine.
Using button doesn't respond either, I'm thinking this is a react navigation issue potentially? There is no issues transitioning to the screen though?
Here is my screen;
import React, {Component} from 'react';
import { View, Text, TouchableOpacity, Alert, Button} from 'react-native';
class RaceScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', backgroundColor:'rgba(30,30,30,0.98)'}}>
<TouchableOpacity onPress = {() => console.log('Hello')}>
<View style={{ margin:50, height:100, width: 200, backgroundColor:'red', alignItems:'center', justifyContent:'center' }}>
<Text style={{ color:'white' }}>
Go back
</Text>
</View>
</TouchableOpacity>
<Button title="Go back button" onPress = {() => console.log('Hello')}>
</Button>
</View>
);
}
}
export default RaceScreen

I've found that the Touchable components typically don't respond well to text children. You simply need to wrap it inside a View:
import React, {Component} from 'react';
import { View, Text, TouchableOpacity, Alert} from 'react-native';
export default class RaceScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', backgroundColor:'rgba(30,30,30,0.98)'}}>
<TouchableOpacity onPress = {() => console.log('Hello')}>
<View style={{ margin:50, height:100, width: 200, backgroundColor:'red', alignItems:'center', justifyContent:'center' }}>
<Text style={{ color:'white' }}>
Go back
</Text>
</View>
</TouchableOpacity>
</View>
);
}
}

I finally figured it out. In the createStackNavigator method from react-navigation, transparentCard:true is a deprecated property and was causing the bug. I was using version 3 documentation on a version 4 package of react navigation.
Looking at there site, they have just released version 5 which is great!
A note to the less experienced developers like myself, making sure you're aware of the version of each package you are using is critical for some of these difficult bugs. Don't let it get you down though, react native is elite!

React Native Stacknavigation Custom back button on defaultNavigationOptions

I currently have a static navigationOptions on every single page where I override the backbutton. I'm trying to change this so it uses defaultNavigationOptions instead. How do I access the back functionality of the navigationstack from the navigation file itself?
Current code:
const LoginNavigator = createStackNavigator(
{
// screens
},
{
headerLeft: (
<TouchableHighlight
onPress={() => /* navigate back */}
style={{ alignSelf: "center", marginLeft: 10 }}
>
<FontAwesomeIcon icon={faArrowLeft} color="#ffffff" />
</TouchableHighlight>
)
}
}
);
export const LoginNavigation = createAppContainer(LoginNavigator);
This gets imported into the main app, may that help.

Keyboard blocking textinput with Scrollview and KeyboardAvoidingView in react native

I am using RN 0.55.4 + Expo
I tried to use KeyboardAvoidingView to my form but it doesnt change anything with or without KeyboardAvoidingView, its still blocking my form. I am using
tcomb-form
This is my current code
return (
<View style={styles.container}>
<KeyboardAvoidingView>
<ScrollView>
<View>
<Header/>
<View style={styles.inputs}>
<LoginForm
formType={formType}
form={this.props.auth.form}
value={this.state.value}
onChange={self.onChange.bind(self)}/>
{passwordCheckbox}
</View>
<FormButton/>
<View >
<View style={styles.forgotContainer}>
{leftMessage}
{rightMessage}
</View>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
</View>
)
This is the style
var styles = StyleSheet.create({
container: {
flexDirection: 'column',
flex: 1
},
inputs: {
marginTop: 10,
marginBottom: 10,
marginLeft: 10,
marginRight: 10
},
forgotContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 10,
marginLeft: 10,
marginRight: 10
}
})
This is the display
I also tried https://github.com/APSL/react-native-keyboard-aware-scroll-view library but still same result, keyboard is blocking the view / form.
Anyone know whats wrong?

For iOS you should set the "behavior" parameter of the KeyboardAvoidingView to "padding" :
<KeyboardAvoidingView behavior="padding">
Refering to react-native documentation :
Note: Android and iOS both interact with this prop differently.
Android may behave better when given no behavior prop at all, whereas
iOS is the opposite.
A working example on iOS and Android :
<KeyboardAvoidingView behavior={Platform.OS == "ios" ? "padding" : null}>

It also happened to me... ScrollView and FlatList can work it out by setting a dynamic height depending on your data to FlatList. eg:
<ScrollView>
<FlatList style={{height: dataArr.length * YourInputHeight}}
...
/>
</ScrollView>

React Native: Can't style the Button

I am quite new to React Native. I am familiar with React and use it for my work. React Native seems different in terms of applying styles to the components.
I am having issue applying styles to the button.
Here is my current code:
<Button
title="LET'S GET STARTED"
onPress={() => {
console.log('You tapped the Decrypt button!');
}}
buttonStyle={{
backgroundColor: "#0A6ABB",
width: 300,
height: 45,
borderColor: "#FFFFFF",
borderWidth: 2,
borderRadius: 5
}}
containerStyle={{ marginTop: 50 }}
/>
I tried multiple ways, but the styles are not being applied the button that I have created.
Here is the screenshot of how it looks like:
"Let's get started" is the button and no matter what it just has the default blue text.
How can I fix this?
Could anyone please help me with this?

Is your Button component imported from react-native? If yes then you can't style it because as stated on their documentation, below are the supported props, buttonStyle is not supported prop. Alternatively, maybe you can try other packages like Button from react-native-elements or NativeBase
onPress
title
accessibilityLabel
color
disabled
testID
hasTVPreferredFocus

Button is very limited in react native. You can use TouchableOpacity instead to give you more flexibility See documentation here.
TouchableOpacity example:
render () {
return (
<TouchableOpacity
style={styles.button}
onPress={this.onPress} >
<Text> LETS GET STARTED </Text>
</TouchableOpacity>
)
}
const styles = StyleSheet.create({
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10
},
});
There are also different kinds of "buttons" depending on what you need like TouchableHighlight, TouchableWithoutFeedback

Use TouchableOpacity
import { StyleSheet, TouchableOpacity, Text }
render() {
return (
<TouchableOpacity
style={styles.button}
onPress={() => { console.log('You tapped the Decrypt button!'); }}
>
<Text> LET'S GET STARTED </Text>
</TouchableOpacity>
)
}
const styles = StyleSheet.create({
button: {
alignItems: 'center',
backgroundColor: "#0A6ABB",
width: 300,
height: 45,
borderColor: "#FFFFFF",
borderWidth: 2,
borderRadius: 5,
marginTop: 50
},
});