Using android-specific style rule, elevation, I get a nasty "halo" effect when using. for example, this image shows elevation: 20:
Even a small elevation 1,2, or 3 gives the appearance that the element is "haloed"/has a border (bad)
How can I add more customization to the android-specific shadow to get rid of halo effect. iOS has specific rules like shadowOpactiy, shadowRadius, shadowOffset–but I don't see anything for android.
According to the official documentation there is no such thing as shadowopacity or any way to change the default shadow since is there
by design, by "material design"
Source: https://developer.android.com/training/material/shadows-clipping
But what you can do is to use a component with a dummy view that has the desired border and then just use it in your render function like
render(){
<View style={{flex:1}}>
<Viewwithborder>
//pass the item you want to have custom elevation here
</Viewwithborder>
</View>
}
and in your custom "viewwithborder" you just do this
render(){
<View style={{styles.CustomElevationStyle}}>
{this.props.children}
</View>
}
Related
I am not able to fill the status bar area with component. I tried to do it by hiding the status bar using <StatusBar hidden />. But this one leaves a white space there. For example I want to fill the green image the status bar.
TLDR: working project link
On the gist link (you've provided on the comment), I can see that you are using the following structure
<SafeAreaView>
<StatusBar ... />
<ImageBackground ...></ImageBackground>
</SafeAreaView>
If you want to hide the status bar and cover the whole screen with the image you need to change SafeAreaView to just View and also remove StatusBar component.
<View>
<ImageBackground ...></ImageBackground>
</View>
Cause SafeAreaView will dynamically put some padding at the top. So although you've put style={{ height: '100%', width: '100%' }} it will respect the padding of SafeAreaView cause it is the parent component here.
Also at this point, you do not need StatusBar, cause the StatusBas already has an image as background.
Is it possible to extend the tab view (image) all the way to the top of the screen and have the tab bar overlay it? Tab bars' backgroundColor is "transparent". Using createMaterialTopTabNavigator from React Navigation v3. There seems to have been something along the lines of displayUnderTabBar option in the earlier versions but I can't seem to find it in the documentation anywhere.
What you do is create a custom component for the tabs and position it absolutely over the screens.
<Tab.Navigator tabBar={props => <MyCustomComponent {...props} />}>
{...}
</Tab.Navigator>
Check out the example of a custom tabBar component here.
In the above example, make the positioned absolutely to top. Note that if you do this, however, you will need to change TouchableOpacity to TouchableWithoutFeedback because of the problem noted in this question question.
In order to do this, following styles need to be applied to the custom Tab Bar component that's passed in to the createMaterialTopTabNavigator:
style={{
...
position: "absolute",
zIndex: 1,
width: '100%'
...
}}>
I'm trying to create a screen that looks like the attached picture. The styling code I used works only for iOS but doesn't work for Android.
The sample code with preview can be found here: https://snack.expo.io/#tushark/absolute-android
Please check for both iOS and android.
Here is the layout I want to create.
I've create a new Expo project from a sample code you give here: https://snack.expo.io/S1yDf4Q47
On the AbsoluteView Component add another View to handle the display screen:
<View style={styles.container}>
<View style={{borderColor:'transparent'}}> // add borderColor, or the screen looks weird on android (i don't know why)
{View of card, row, title and content styles}
</View>
<OrangeButton
label="CONFIRM"
onPress={() => console.log('Pressed')}
styleButton={styles.loginBtn}
/>
</View>
and the Button Component I change the Bottom: -20 to top: width / 3,
and the layout look's like :
Android :
iOS:
I would recommend leaving the orange button outside of the card container and using an absolute position with device height to position it, you can also do the same for the card container to give the button the same position relevant to the card container on any device.
ex.
top: Dimensions.get('window').height/8
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.
In this following example, my add-to-favorites button is not right aligned and is black instead of white. I don't see any styles defined anywhere and I can't seem to get to the safari inspector using exponent.
Incorrect
Correct white star that's right aligned
Looking at the sample code
https://github.com/shoutem/ui/blob/develop/examples/components/Tiles.js
- it looks like it should style it to white and right aligned but it doesn't do so in my case. Do I need to wrap it in an enclosing style? How do i debug this?
render() {
return (
<View style={styles.container}>
<Image
styleName="large-banner"
source={{ uri: 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png' }}
>
<Tile>
<View styleName="actions">
<Button styleName="tight clear"><Icon name="add-to-favorites" /></Button>
</View>
<Title>HOW TO MAINTAIN YOUR MENTAL HEALTH IN 2016</Title>
<Caption>6557 Americo Hills Apt. 118</Caption>
</Tile>
</Image>
....
It was because I was importing View from react-native. Once I started to import View from #shoutem/ui it carried over the correct styles.