I'm learning react-native and I'm using styled-components.
In react-native I know its possible to make a component with some style and than the parent can add some extra style like this:
Parent.js
<CardSection style={{ flexDirection: 'column' }}>
Child.js
<View style={[styles.containerStyle, props.style]} >
Then the flexDirection is automatic added to the containerStyle for that element in the parant.
Is there anyway todo something like this in styled-components?
You can extend a style to reuse code. But that is rather used for inheritance and you can not extend a button with a div or something like that.
Here is more information:
https://www.styled-components.com/docs/basics#extending-styles
What i would do is try normal css inheritance, as that will work in SC aswell. Read up more on this here https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
Related
I am learning React Native and styled components. I am working on a simple iOS app and facing some problems with styled-components.
What I'm trying to do
I am trying to show modal on click which looks like this
<Modal visible={this.state.isModalVisible} animationType={'fade'}>
<StyledView flex={1} padding={10} backgroundColor={'orange'}>
<View>
...more Views and Texts
</View>
</StyledView>
</Modal>
StyledView is a custom view that I have created using styled-components which looks like this
const ViewWrapper = styled.View`
flex: ${props => props.flex};
padding: ${props => props.padding};
backgroundColor: ${props => props.backgroundColor};
`;
const StyledView = ({ flex, padding, backgroundColor }) => (
<ViewWrapper
flex={flex}
padding={padding}
backgroundColor={backgroundColor}
/>
);
export default StyledView;
Problems I'm having
1) When I set padding={10}, I get an error Failed to parse declaration "padding: 10".
2) After Googling a bit, I found that I should be using padding={'10px'} which throws this error, 10px is of type NSString cannot be converted to YGValue. Did you forget the % or pt suffix?.
(padding={'10%'} works fine)
Then I simply tried setting flex and padding values in ViewWrapper and send only background color as prop.
3) But for some reason, Views and Texts nested within StyledView does not show up.
Please tell me why it's not working and help me understand what I'm missing here. Thanks.
You have a couple of issues.
Styled Components do not accept strings in them, so you cannot
sent the '10px' from the prop.
You are correct that padding
needs a px at the end. Something padding alone does not work, but
you can workaround it by adding paddingVertical and
paddingHorizontal with the same value which is the same as padding.
You are overcomplicating the implementation as you dont need to
pass the style props and you can define them all within your styled
component. Like this:
import styled from "styled-components/native"
const StyledView = styled.View`
flex: 1;
padding: 10px;
backgroundColor: orange
`;
And then you just use it like this:
<Modal visible={this.state.isModalVisible} animationType={'fade'}>
<StyledView>
<View>
...more Views and Texts
</View>
</StyledView>
</Modal>
No need for the ViewWrapper or more props. Also, and this is just personal. I only use StyledComponents for the ones that could change at run time or depend on a theme, like exts for fontFamily or fontSize. For the rest that have constant styles that never change, I just use normal styles objects since it is less verbose.
If this is a simplified version and you absolutely need the props you con move them all into one single theme object and pass it with a ThemeProvider and then just read it as ${props.theme.backgroundColor} or something.
Cheers
So this week I have started on my first pet project to get hands on learning experience with RN. So far so good I think. But now I have hit a bit of a road block, so I was hoping someone would help me out. So I have got a View of images (coming from an api). I am able to place the images in a grid view like so:
But once I place this view in a Flatlist, the whole layout gets messed up. Looks like this:
I have tried playing around with flex but to no avail. Any help would be much appreciated
Code can be found here:
UPDATED:
https://gist.github.com/anonymous/c565d8f9d7dfa65646b7a3a81bf6330f
FlatList has a numColumns attribute.
Try:
<FlatList style={styles.FlatlistStyles} data={this.state.moviesTrending}
numColumns={4}
renderItem={({item}) => this.renderMoviesTrending(item)}
keyExtractor={this._keyExtractor}
/>
and add width style={{ width: 200 }} or any appropriate width to the child element (rendered by the renderMoviesTrending function).
You have to use contentContainerStyle instead of just style and set some flex props for it to work. For example:
justifyContent: 'flex-start'
flexDirection: 'column'
I'm having some problems with zIndex and position whilst styling a drop down list (react-native-menu). I want to make the drop down list appear on top of all other components on this scene when it's clicked. I'm trying to use zIndex and position but maybe not doing it correctly?
In my code (below), I'm rendering a hierarchy where Card > CardSection > various subcomponents of each. The drop down list consists of the components MenuContext (config) and TopNavigation (main drop down list).
return (
<Card>
<CardSection style={{zIndex: 2}}>
<View style={thumbnailContainerStyle}>
<Image style={thumbnailStyle}
source={{ uri: "" }}
/>
</View>
<View style={headerContentStyle}>
<Text style={headerTextStyle}>Tam</Text>
<Text>tam#tam</Text>
</View>
<MenuContext style={{ flex:1, zIndex:6, position:'absolute', flexDirection: 'column', alignItems: 'flex-end' }} >
<TopNavigation/> //this is
</MenuContext>
</CardSection>
<CardSection style={{zIndex: 1}}>
<Text style={{zIndex: 2}}>{props.post.body}</Text>
</CardSection>
</Card>
)
So the drop down is a child of the first CardSection. I've got it to appear over it's own parent CardSection but I can't get it to appear on top of the second CardSection that renders after. So I can't get it to show on top of it's parent's sibling.
I'm reluctant to use some plugin or workaround.
Any ideas? Thanks!!
So what was making it so hard to render the popup menu above things on the z-axis was the sibling of it's parent. So what helped me get the results I needed was looking more macro and moving <ContextMenu/> higher in the component hierarchy, out of this component altogether and into it's parent.
I should have inferred this since the docs for the original package I used had ContextMenu in the entry point to the app and comments such as:
// You need to place a MenuContext somewhere in your application,usually at the root.
// Menus will open within the context, and only one menu can open at a time per context.
My mistake was getting lost in the micro world of zIndex and position and assuming that what looked like a styling problem should be solved with a styling solution. I forgot about the bigger picture.
I have a parent <View> type and a child <Text> type. If the text value is large, the text moves out of the container view. Any idea how to contain it ?
P.S. I dont want the text be trimmed and followed by "...", because i need to add animation to it and scroll it back into the view.
To solve this issue, I suggest using flex. Here is a simple example:
<View style={{
flex:1,
flexWrap:'wrap',
flexDirection:'row',
justifyContent:'center',
alignItems:'center',
marginTop:50}}>
<Text>Something</Text>
<Text>Something</Text>
<Text>Something</Text>
<Text>Something</Text>
<Text>Something</Text>
<Text>Something</Text>
<Text>Something</Text>
<Text>Something</Text>
</View>
The key here is the flex:1 and the flexWrap:'wrap', which tells the view to use up all the available space and wrap its children around itself. If you are still unable to make it work, try to give it an 'alignItems' style like I did in the example above.
With this code you can make something like this:
Screenshot of the code above
Sorry for what has to be a basic noob question....
I can't figure out how to change the background color of the NavigationHeader component in NavigationExperimental.
Any tips?
Tx
You are able to set the style prop on the NavigationHeader component.
You should be able to do something like:
<NavigationHeader
{...props}
style={{ backgroundColor: 'green' }}
// Any of the other required props
/>
And then just make sure to render that NavigationHeader in the renderOverlay prop in the NavigationAnimatedView or any other component you decide to render the Header.