I am using fluentui/react-northstar
as in the doc, styles has below definition
Name Default Type Description
styles ComponentSlotStyle Additional CSS styles to apply to the component instance.
but what is different between style vs styles in component.
<Flex styles={{ marginTop: 15 }}> </Flex>
<Flex style={{ marginTop: 15 }}> </Flex>
style is a prop provided by react for all HTML elements (same as style attribute in HTML)
styles is a prop provided for components that accept IStyleableComponentProps, which provides additional functionality over the style attribute like theming.
Related
I'm working on a React Native app (initially only Web) where we need to separate the roles of developer and styler (i.e. the person responsible for styling the app). With traditional HTML development this is easily done through CSS. In other words, the developer assigns IDs and/or classes to HTML elements, allowing the CSS developer to get to work on the CSS files of the code-base.
Is it possible to do something similar in React Native? In other words, can we change the styles of the various elements of the user interface without needing to modify the code that generates the elements?
Yes. I think the style property of view is pretty similar to CSS, you just need to write a styles.js file separate from your view code. Then your "styler" just need to modify style attributes in that file instead of go into the main code.
Something like this:
Your styles.js
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
backgroundColor: Colors.COLOR_BACKGROUND_LIGHT,
paddingBottom: normalize(50)
},
buttonContainer: {
flexDirection: 'column',
alignItems: 'center',
padding: Dimens.contentPadding
},
inputContainer: {
flexDirection: 'row',
height: normalize(30),
borderBottomWidth: 0.5,
alignItems: 'center',
borderBottomColor: Colors.COLOR_LIGHT_GREY,
},
});
Your index.js
import styles from ".....";
.....
.....
render() {
return (
<View style={styles.container}>
...
</View>
)
}
Hope that help ^^
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'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
In every code example mentioned in NativeBase Docs, there's no usage of React StyleSheet.
I didn't find a way to override styles of NativeBase.
How can I include React StyleSheet into my app?
NativeBase uses a different approach to add styling to your component.
It uses a Utility first approach, wherein it leverages the ReactNative stylesheets API and adds a layer of Utility Props on top of it. The idea is to pass props to your component to change their styling, instead of defining a className and adding styles in a separate stylesheet.
For example, with React Native, you would write:
function Example() {
return (
<View style={styles.container}>
{/* content */}
</View>;
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#0891b2',
paddingVertical: 16,
paddingHorizontal: 12,
borderRadius: 5,
alignSelf: 'center',
width: 375,
maxWidth: '100%'
}
});
Now, with NativeBase, to achieve the same view, you would write it as follows:
function Example() {
return (
<NativeBaseProvider>
<Box bg="primary.600" py="4" px="3" rounded="md" width={375} maxWidth="100%">
{/* content */}
</Box>
</NativeBaseProvider>;
);
}
Here, NativeBase has already defined bg, py, px, etc. as props and mapped them to the styling properties of backgroundColor, paddingVertical , paddingHorizontal, etc. respectively.
There is a list of these mappings provided here, which you can simply refer to add any styling that you may need for your component.
For NativeBase usually if you want customize the appearance you need to do it at a theme level and not a component/widget level.
http://nativebase.io/docs/v0.5.2/customize
I believe the reason it this keeps the UI consistent.
Have a look at the source code for all the widgets that you are trying to override the style for:
https://github.com/GeekyAnts/NativeBase/blob/master/Components/Widgets/
There are certain cases where you can amend certain aspects e.g. for the button
this.props.style is used anywhere but this.props.textStyle
So you can override the textStyle when you define the component:
<Button textStyle={{...}}/>
https://github.com/GeekyAnts/NativeBase/blob/master/Components/Widgets/Button.js
I am using the ToolbarAndroid where i need to center the Toolbars Title. I coudn´t figure out how this works. With the Styles properties it didn´t work.
This is my code:
<ToolbarAndroid
title={toolbarTitle(this.props.activeTab)}
titleColor='white'
style={styles.toolbar}
actions={toolbarActions(this.props.activeTab)}
onActionSelected={this._onActionSelected.bind(this)}>
</ToolbarAndroid>
Toolbar style:
toolbar: { height: 50, backgroundColor: 'grey' }
I can render the title properties and other properties depending on which Tab i am (using scrollable-tab-view) but changing the position where my title is placed didn´t work on my approach
You can add a custom view inside the toolbar
<ToolbarAndroid>
<View style={styles.title}>
<Text>Hi there</Text>
</View>
</ToolbarAndroid>
and center its text
var styles = StyleSheet.create({
title: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
marginRight: 28
}
});
A margin was needed to get alignment right.
In some cases I've seen that it was necessary to set an extra style property like backgroundColor for the alignment to work.
By design guidelines toolbar title is aligned to the left. There are some hacky ways to do this in java, but it is probably impossible in react native.
If you don't mind android design guidelines I advise you to use custom component instead of ToolbarAndroid.