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.
Related
In my React Native Project, I am trying to make some kind of lists using Flatlist or sometimes using map method, for executing JSX Element. I am getting the result correctly, But there is a bit of a problem in separate.
Let's take chatting app example, When we open WhatsApp there are a lot of people showing up, but there is also a tiny separator after each item, That looks great, Now exactly when I try to put that separator in my React Native application using ItemSeparatorComponent attribute in Flatlist, It's working but still in some places, meaning in some items that separator not showing up, its looks missing, it feels that there is no border/separator. And actually what's going on is that, the below item from that separator which is hidden or which height looks smaller than others, that below View go a little bit towards the upside, so the separator gets to hide, That's the main problem, Why is that happening, I tried everything but still, I am getting that UI problem.
Here is code example:
<FlatList
data={actionSheet._data}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
keyExtractor={(_, index) => index}
renderItem={({item, index}) => <ActionSheetClickableItem data={item} index={index}/> }
ItemSeparatorComponent={() => (
<View
style={{
height: 1,
width: '100%',
backgroundColor: 'red'
}}
/>
)}
/>
OR
<ScrollView>
{
actionSheet._data.map((item, index) => (
<>
<ActionSheetClickableItem data={item} index={index} key={index}/>
<View
style={{
height: 1,
width: '100%',
backgroundColor: 'red'
}}
/>
</>
))
}
</ScrollView>
So according to the above code, I know for sure, that everything is correct, But why is that separator get hidden, If we look at this picture in the area of the green rectangles, there is no border showing up, Why... I want to show it here, I tried to put zIndex property, that trick working correctly but that isn't the solution, It have to correct view as we expecting, why its behave like this, any solution??????
I was facing the same issue.
That might be with Emulator or Your screen.
You can use also increase the height of itemSeparater or make the background color more darker.
If you check it in real device then it displays all the separaters.
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.
I'm using React Native with NativeBase as follows:
https://snack.expo.io/#deltanovember/tab-swipe
I'm trying to implement the Advanced Deck Swiper here:
http://docs.nativebase.io/Components.html#deckswiper-adv-headref
My code is almost identical as the example, but my forward icon is aligned on the left of the button:
whereas based on the example, it should be aligned to the right of the button:
How do I make the alignment match the example (ie icon on the right of the button?)
this issue is because you did not set style for your <Body /> tag
This should work correctly
and try work with styles when see this in where ever in your project
this is your right button:
<Button
iconRight
onPress={() => this._deckSwiper._root.swipeRight()}>
<View style={{ flexDirection: 'row-reverse' }} >
<Icon name="ios-arrow-forward" />
<Text>Swipe Right</Text>
</View>
</Button>
Maybe just switching the icon and text will fix this but it's better to be regular :)
(Good luck this is my second answer to you my friend in day :DDDD )
You're placing icon and text in uncorrect order. I just switched them and it works:
<Text>Swipe Right</Text>
<Icon name="ios-arrow-forward" />
I am trying to decorate part of text in react-native. I managed to add background to part of text using nested <Text> component. It looks something like this:
Actual:
<Text>
The Python shell used in the terminal is called a
<Text style={...}>{` ??? `}</Text>
interpreter.
</Text>
But, this doesn't allow you to add border radius, margin or padding. What I'm looking for is something like this:
Expected:
Consider use a View, here is a little example:
<View style={{flexDirection:'row'}}>
<Text>The Python shell used in the terminal is called a</Text>
<View style={{you can apply your style here}}><Text>{` ??? `}</Text></View>
<Text>interpreter.</Text>
</View>
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>
}