Comments (21)
+1 for this. You can solve this issue by flatten the style object like this:
<Footer style={StyleSheet.flatten(styles.footer)}>
<Text> This is an awesome footer </Text>
</Footer>
from nativebase.
@sanketsahusoft Please do so, it's very annoying to have to see which library we're importing components from to decide how we're going to create style objects.
from nativebase.
@bishbashbosh123 We can add the compatibility of Stylesheet.create() but that wouldn't add anything to the performance here because StyleSheet.create passes the object to the native layer only once and if we fetch the object in the JS layer and pass the object again to the native layer. It doesn't make sense.
But we are going to add the support of Stylesheet.create() in the next version.
from nativebase.
@sanketsahusoft, why can't you support it? Wouldn't it be as simple as checking the type of the style argument? when it's an object let NativeBase call Stylesheet.create(). When it's an number, don't do anything.
from nativebase.
This apparently breaks usage of my styling-library.
from nativebase.
This is not working in the latest verison
from nativebase.
Yes, that is something we too came across while testing. As of now NativeBase only supports inline styles and not style objects. We'll fix this with our next release.
from nativebase.
@sankhadeeproy007 Awesome, thanks for the response, I will wait for the next release.
from nativebase.
Hey @hoducha, thanks for helping out. @erickzanardo We got a bit busy with other stuff, expect an update early next week.
from nativebase.
@hoducha thanks for the help
@sankhadeeproy007 no problem, take your time :D
Thanks all
from nativebase.
It has been fixed and is available in development branch. Not publishing now as we're planning on adding a few more features for the next release. Pull from the development branch if you need it urgently.
from nativebase.
Great. Thanks all.
from nativebase.
Issue still exists in version 2.0.5. Only works if you use version 0.5.11 of nativebase.
from nativebase.
@dvluong version 2.0.5 doesn't support Stylesheet.create yet
http://nativebase.io/docs/v2.0.0/migration
from nativebase.
@shivrajkumar Ahh ok, did not realize it was still in the works, thanks!
from nativebase.
@dvluong Actually, it doesn't look like we will ever support Stylesheet.create() because internally it is called by NativeBase engine. You can just pass the CSS object in style props instead.
from nativebase.
It's not that straightforward because
- If the
style
attribute gets a number we need to fetch the reverse mapped JS object to get the styles and merge it to the style present in the context because NativeBase has contextual styling which is affected by some base style of the component and the context where the component is being used. - Also, React Native doesn't provide a way to translate the number of Stylesheet with the corresponding JS object. We manually required some files of React Native with 0.x and we didn't want to add that hack again
from nativebase.
Just pointing #510, #525, #527 here for more context on the issue and to point everyone to @hoducha's workaround above in case they prefer to keep all stylesheets in one place.
from nativebase.
I've just switched from storing my styles as flat objects to objects generated from StyleSheet.create and got this problem. I can't find any clear reason why anyone should use StyleSheet.create rather than flat objects anyway. Does anyone know? I don't quite understand the performance reasons in the React Native docs:
Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time.
My style objects aren't created in the render method, if that's what this is referring to; I import them so I think they're only created once.
It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet).
The latter I can understand, but it's apparently not implemented anyway.
But on this note, @sanketsahusoft :
React Native doesn't provide a way to translate the number of Stylesheet with the corresponding JS object.
...isn't that what StyleSheet.flatten does?
from nativebase.
@hoducha this is not working for
from nativebase.
base in your code, I think you miss this code to add
import { StyleSheet } from 'react-native';
from nativebase.
Related Issues (20)
- Type error when run jest test
- SSRProvider warning HOT 2
- Unable to find modules after install and yarn start the react-native cli HOT 3
- Modal Accessibility Issue in UWP
- [Select] customize the content of the Select component HOT 2
- Multiple Modals - Only on iOS the new modal appears below the first Modal HOT 1
- SSRProvider it`s not necessary in React18 HOT 1
- <Item> tag not working
- How to get theme in React Class Components ?
- Why does toast.isActive() only take effect when placement is set to bottom
- Error in React 18
- Select with InputLeftElement
- In React 18, SSRProvider is not necessary and is a noop. HOT 1
- Base style extendTheme for Button component does not work
- onPress triggers twice, when activated via Enter key
- Disabled Button is not WCAG accessible and there is no way to set alternative color with themes other than using opacity.
- when use the useToast, state value is initialized
- Codesandbox demo broken
- Demo doesn't work in Expo snack
- Menu placement is wrong
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nativebase.