When I make buttons on React Native and use the Expo app on Iphone, the buttons render as only text. I need the buttons to fully render with a colored background and border radius etc.
Add styles to the button. This is a good example provided by expo:Expo Button styles
//You can also add a height and width to the styles
<TouchableOpacity onPress={() => console.log("pressed")}
style={{backgroundColor: 'tomato', padding: 15, borderRadius:10}}>
<Text>Press Me!</Text>
</TouchableOpacity>
Related
I have a FlatList in React Native with fullscreen image and video items (with pagingEnabled). I want to have a short descriptive touchable text floating on top of the FlatList, to open up a view with some information about the image/video when pressed.
To make the user experience nice, I'd like to be able to scroll the FlatList through the touchable text as well. I.e. if the user happen to start their scrolling motion on top of the text, the FlatList would scroll but if it is a simple press event I'd like to open the view with details about the image/video.
No mater what I try I end up with either the text being able to react to the press OR the FlatList being able to scroll. I have tried different configurations with a custom PanResponder and pointerEvents but seem to always end up with a state were one thing does not work. Do you guys have any smart ideas? I am probably just stuck in the wrong train of thought.
This is a simplified view of my component structure:
<View>
<View style={{ position: 'absolute', bottom: 100, zIndex: 10 }}>
<TouchableOpacity onPress={() => console.log('press')}>
<Text>Some Descriptive Text</Text>
</TouchableOpacity>
</View>
<FlatList pagingEnabled horizontal {...otherFlatListProps} />
</View>
I implemented a bottom half modal view in react native, which is sliding in from the bottom . I set the background of the modal view to transparent so the previous view is still visible, but the modal view is in focus. This is working fine and once it is open it also looks how I want it to look. My problem is, that the transparent background is also sliding in from the background and this does not look like a native implementation at all. What I want to achieve is, that the transparent background just appears while the modal view slides in from the bottom. Any idea on how to solve this?
Note: Iam using Modal from inbuilt react native, hence not using any npm module or package.
My code:
import { View, Text, Modal } from 'react-native';
function DurationModal(props) {
<View>
<Modal
visible={props.isVisible}
transparent
animationType='slide'
statusBarTranslucent
>
<View>
<View style={{ backgroundColor: 'rgba(0,0,0,0.1)', height: hp('60%') }}></View>
<View style={{ backgroundColor: Colors.whiteBackgroundColor, height: hp('40%') }}>
<Text>Hello</Text>
</View>
</View>
</Modal>
</View>
);
}
I'm trying to change the back button size in my react native app navigation header because android is giving me a warning that the touch target size is to small (30x30px, wants it to be at least 48x48px). I'm using reactnavigation.
I've worked out you can customize the back button in the header using headerLeft and the HeaderBackButton element like so.
<Stack.Navigator
screenOptions={({route, navigation}) => ({
headerLeft: () => <HeaderBackButton style={{height: 100, width: 100}} onPress={() => navigation.goBack(null)}/>
})}>
However, the height and width styles have no effect. I've also tried fontSize with no effect. Would prefer an approach where I don't have to override headerLeft and reimplement all of the back button default behaviors as well just to change the size.
You can style Stack's original headerLeftStyle with headerBackTitleStyle={{fontSize: 100}}
If you want custom Image, use option 'headerBackImageSource'.
If you still trying custom components, onPress={()=> navigation.canGoBack() ? navigation.goBack() : null} can be used.
How Can I change the Color or style the Arrow inside the "rightcircle" Icon in React Native?
the default Color of the Arrow is White
https://icons.expo.fyi/AntDesign/rightcircle
The SVG of that icon is the filled part, that means the arrow is not white, is actually transparent, so you need to wrap the icon on a sized view and change the background color:
<View style={{
backgroundColor:"red",
width:24,
height:24,
borderRadius:12
}}>
<AntDesign style={{
}} name="rightcircle" size={24} color="black"/>
</View>
I have TextInput at the bottom of the screen. When TextInput is focused then keyboard appears and due to this all the flex view gets shrink to the available screen. I want to achieve that page layout should not change and input should be visible to user.
<View style={MainView}>
<View style={subMain1}>
<View style={{flex:1,backgroundColor:'#add264'}}></View>
<View style={{flex:1,backgroundColor:'#b7d778'}}></View>
<View style={{flex:1,backgroundColor:'#c2dd8b'}}></View>
</View>
<View style={subMain2}>
<View style={{flex:1,backgroundColor:'#cce39f'}}></View>
<View style={{flex:1,backgroundColor:'#d6e9b3'}}></View>
<View style={{flex:1,backgroundColor:'#69ee9a'}}>
<TextInput placeholder="input field"/>
</View>
</View>
</View>
const Styles = {
MainView:{
flex:1,
backgroundColor:'green'
},
subMain1:{
flex:1,
backgroundColor:'blue'
},
subMain2:{
flex:1,
backgroundColor:'orange'
}
}
I just found an answer to this.
I just have to use fixed height for my main container and inside that I can use flex layout. And If keyboard is hiding the content then we can use Scrollview that will allow scrollable interface when user clicks on input.
This helped me hope it can help others. :)
I'm not quite sure I understand what the issue you're running into, but I recently struggled with keyboard avoiding views in my app - for some reason, the native component just wasn't working.
Check this package out - it did the trick for me, and offers some cool customization capabilities:
https://github.com/APSL/react-native-keyboard-aware-scroll-view
Use 'react-native-keyboard-aware-scroll-view' and keep this as parent view and put all view inside that view. This node module creates scrollview and it listens to keyboard show event and automatically scrolls your screen so user can see the input box without getting it hidden behind the soft keyboard.