How to set transparent drawer in react native 6.x
backgroundColor:"transparent" didn't work
overlay:"transparent" didn't work
drawerBackgroundColor:"transparent" didn't work
So How to set transparent drawer in react native 6.x?
Use rgba value for the backgroundColor.
example
backgroundColor: 'rgba(52, 52, 52, 0.8)'
This sets it to a grey color with 80% opacity, This value can be anything from 0.0 to 1.0.
Related
I have a big image that I'm using in the React Native ImageBackground component.
function Component(){
return <ImageBackground style={{
height: 300,
width: '100%',
}}/>;
}
The size is correct, but I would like to reposition the image internally as in object-position in css. What is an equivalent style selector?
Try using resizeMode prop of Image. ImageBackground inherits app the properties of Image. Setting correct image resizeMode should resolve your issuel.
Refer this : https://reactnative.dev/docs/image#resizemode
wanted to implement Bottom Tab Navigator with a Custom Styled Central Tab Icon and a DrawerNavigator. When the BottomTab is wrapped with DrawerNavigator, the Center Button that has roundness gets clipped on Android (ok on IOS)
For Android
For IOS it is fine, with or without Drawer wrap
A working snack of above is below to toggle both states (with DrawerNavigator + Bottom Navigator Vs Bottom Navigator)
Again issue is only on Android
https://snack.expo.dev/#haniq313/bottomtab-custom-center-icon
The issue is not there with react-navigation 6.x. But need to make this work on React-Navigation 5.x
https://github.com/react-navigation/react-navigation/issues/9615
for this looking for a solution. It is a known bug in navigation 5.x and as metioned can be fixed by Wrapping the whole Tab.Navigator in a
<Pressable style={{ flex: 1, }} disabled > <Tab.Navigatior> ......... </Tab.Navigator>
I want to know how to add color shadow to TextInput in react native.
Especially, I mean color shadow.
In Android, ShadowColor or Elevation is not working for color shadow.
And the height of TextInput is changable.
I tried the following code for the style to TextInput.
shadowColor: 'rgb(112, 0, 0)',
shadowOpacity: 0.12,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 2,
elevation: 2,
But it doesn't work on Android.
If you have any good experience and any opinion, please tell me.
I look forward to your kind assistance.
Best regards,
You can use this library
https://www.npmjs.com/package/react-native-cardview
$ npm install react-native-cardview --save
import CardView from 'react-native-cardview';
<CardView
cardElevation={2}
cardMaxElevation={2}
cornerRadius={5}>
<TextInput/>
</CardView>
This library does not control shadow color
For this library you can use this directory
https://github.com/879479119/react-native-shadow
I use TouchableNativeFeedback to show a nice ripple effect on Android, I use a <View> wrapper over TouchableNativeFeedback to solve a borderRadius problem on it (See here: react native elements issue).
When I perform a longPress, then the borderRadius fix does not have any affect.
How to specifiy modal height react native navigation? It default stretches full screen, how to stretch it half screen?
Can the drawer be shown from the bottom?
If you are asking for Modal in react native, you can proceed below.
1 - To reduce the modal height, you can specify the height inside the most parent View element
<View style={{height: 60%}}>
Also you can import Dimensions and use it to get screen's height and width as below,
import { Dimensions } from 'react-native';
const window = Dimensions.get('window');
const screenHeight = window.height;
const screenWidth = window.width;
and then you can use this screenHeight and screenHeight into your css.
<View style={{height: screenHeight - 80}}> // Any values
2 - Anything's possible and yes we can do that in react native too. But first they are called as ActionSheets(as in iOS) / BottomSheets(as in android). You can check these libraries for android and ios or both.
https://github.com/beefe/react-native-actionsheet (Both)
https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior (Android)
https://github.com/eyaleizenberg/react-native-custom-action-sheet (iOS)