React Native Styled System
React Native Styled System Development Story
We created styled-system mimic as a library for React Native.
I’ve created a lot of libraries in the past, but there weren’t many libraries that were created just for myself or to be highly expandable, and that were actually shared as open source with people.
I personally felt a great need for this library, so I put more effort into creating it.
Recently, while studying the web, I was attracted to several design system libraries based on styled-system, and the way they handle styling was interesting.
However, I still didn’t like that I had to style it like this in React Native apps:
<View style={ { backgroundColor: colors.gray500, width: '100%', flex: 1 }} />
So, I created a library that mimics the API of styled-system as follows.
<StyledView bg={'gray500'} w={'100%'} flex={1} />
As a result, I personally found this very convenient and thought it was enough to improve the productivity of the project.
What learned?
Rather than saying that I learned something, it would be more appropriate to say that I observed what other large open source libraries contain.
I didn’t learn anything in particular, but I learned how they manage issues, PR, releases, and contributions on Github, and some of the tools they use, and applied them to this project as well.
First of all, the tools newly introduced to my library are as follows.
Build System
Previously, all you had to do was create and distribute JS files and d.ts files appropriately in dist using the tsc command.
However, recently, I was able to learn more about rollup and its settings, various plugins, other build tools, the concepts of CommonJS (cjs) and ECMAScript (mjs) in JS, and learn about the transpiling and bundling processes in detail.
I studied rollup, but did not use React Native’s library because it is more convenient to build with react-native-builder-bob.
Commit Lint
I applied both commitlint and commitizen to the project.
Semantic Release
Using semantic release, we were able to automatically parse Release and CHANGELOG from Commit.
.bin script of npm
Since react-native-themed-styled-system includes TypeScript type generation, I was able to learn to expose this CLI as a library.
Add other files
We looked at the role that files such as Contribution, Code Conduct, and License play in an open source project and how they should be written.
Conclusion
I learned quite a lot by creating a library in a more standard(?) way like this.
It was fun and I also enjoyed setting up CI and tests.
I hope this library develops further in the future.
Thanks for reading.
Comments