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.
Related
I am building a react native application with expo and I am using the following drawer component
https://reactnavigation.org/docs/drawer-based-navigation/
I am able to style the background color inline, but using labelStyle :{ color: 'white' } and other stylings do not change the appearance of the drawer.
Here is what I have so far...
<Drawer.Navigator initialRouteName="LoL" drawerStyle={{
backgroundColor: 'orange'}} >
Why is the background changing but no other sytles seem to work?
I also found that some people pass in props to their const Drawer = createDrawerNavigator(); , but when I try to do the same thing I get an error that createDrawerNavigator() does not take in any props
Exmaple of someone doing: DrawerNavigator: Change Text Color
Is there something I am missing ?
You will have to pass the colors as drawerContentOptions
For example you can set the activeTintColor like below
<Drawer.Navigator drawerContentOptions={{activeTintColor:'red'}}>
You can refer the docs here
https://reactnavigation.org/docs/drawer-navigator/#drawercontentoptions
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 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
I have TouchableOpacity in a space between flex container that I want to take space even not shown,
My code:
<TouchableOpacity
style={showClear && { visibility: 'hidden' }}
onPress={() => this.props.clearCompleted()}>
<Text>Clear Completed</Text>
</TouchableOpacity>
display: none works but it doesn't take space, the code above dont work but does in web?
In my case, I needed to use the element, so I did something like this:
<TextInput style={{opacity: 0, height: 0}} {...props} />
I hope this works for someone else with my problem.
Update
React Native's StyleSheet now supports toggling visibility using display: 'none' and display:flex.
Not all CSS are supported in React Native, that include visibility: hidden or display:none.
To hide a component, not to render it at all, render empty View or null. Or you want to switch a component visibility, verify react's state
<View>
{ !showClear && (
<TouchableOpacity
onPress={() => this.props.clearCompleted()}>
<Text>Clear Completed</Text>
</TouchableOpacity>
}
</View>
showClear is kept in state
As Leu mentioned, you can just render null.
Another option if you want to keep the area used by TouchableOpacity is setting up opacity: 0.0 in style, but then you have to remember to set also disabled={false} in props of the TouchableOpacity, to avoid call clicking action on invisible area
Just setting the opacity to 0 was enough for my use case.
If we want to make sure element takes space on DOM but is kept hidden to user,
Step 1: Hide it from user using opacity: 0 .
Step 2: Disable interactions of hidden element.
Our JSX should be like below:
<IconButton
icon="close"
disabled
style={styles.hiddenElement}
onPress={() => console.log("Pressed")}
/>
Our stylesheet should look like below:
const styles = StyleSheet.create({
...
hiddenElement: {
opacity: 0,
},
...
});
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