chore: rename createStyles to createStyleSheet

README.md

@@ -106,7 +106,7 @@ export const App: React.FunctionComponent = () => (
 )
 ```
 
-**5. Access createStyles and useStyles with a factory**
+**5. Access createStyleSheet and useStyles with a factory**
 
 ```ts
 // styles.ts
@@ -119,22 +119,22 @@ import { breakpoints } from './breakpoints'
 import { theme } from './theme'
 
 export const {
-    createStyles,
+    createStyleSheet,
     useStyles,
 } = createUnistyles<typeof breakpoints, typeof theme>(breakpoints)
 ```
 
 ## Basic Usage
 
 Library gives you two functions from the factory:
-- `createStyles` which replaces `StyleSheet.create`
+- `createStyleSheet` which replaces `StyleSheet.create`
 - `useStyles` which parses your styles based on screen height, width and theme
 
 ```tsx
 import React from 'react'
 import { View, Text } from 'react-native'
-// access createStyles and useStyles exported from factory
-import { createStyles, useStyles } from 'lib/styles'
+// access createStyleSheet and useStyles exported from factory
+import { createStyleSheet, useStyles } from 'lib/styles'
 
 export const ExampleUnistyles = () => {
     const { styles } = useStyles(stylesheet)
@@ -148,7 +148,7 @@ export const ExampleUnistyles = () => {
     )
 }
 
-const stylesheet = createStyles(theme => ({
+const stylesheet = createStyleSheet(theme => ({
     container: {
        flex: 1,
        justifyContent: 'center',
@@ -161,7 +161,7 @@ const stylesheet = createStyles(theme => ({
 }))
 ```
 
-`createStyles` takes an object like `StyleSheet.create` or function that injects your theme
+`createStyleSheet` takes an object like `StyleSheet.create` or function that injects your theme
 
 `useStyles` hook takes a `stylesheet` and returns an object with two keys:
 - `styles` - parsed styles that can be used directly in React Native components
@@ -178,7 +178,7 @@ const { theme } = useStyles()
 Any style can change based on breakpoints. To do this, change a value to an object:
 
 ```ts
-const stylesheet = createStyles(theme => ({
+const stylesheet = createStyleSheet(theme => ({
     container: {
        flex: 1,
        justifyContent: 'center',
@@ -211,7 +211,7 @@ For more advanced usage and pixel perfect designs you can also use a custom medi
 Media queries can be mixed with breakpoints, but have a bigger priority:
 
 ```tsx
-const stylesheet = createStyles(theme => ({
+const stylesheet = createStyleSheet(theme => ({
     container: {
        justifyContent: 'center',
        alignItems: 'center',
@@ -255,7 +255,7 @@ export const ExampleUnistyles = () => {
     )
 }
 
-const stylesheet = createStyles({
+const stylesheet = createStyleSheet({
     scrollContainer: {
         flex: 1,
         justifyContent: 'center',
@@ -272,11 +272,11 @@ const stylesheet = createStyles({
 
 `react-native-unistyles` embraces the simplicity of `StyleSheet`, making it easy to integrate into your project.
 
-You can replace `StyleSheet.create` with `createStyles` and it will work exactly the same:
+You can replace `StyleSheet.create` with `createStyleSheet` and it will work exactly the same:
 
 ```diff
 -const styles = StyleSheet.create({
-+const styles = createStyles({
++const styles = createStyleSheet({
     scrollContainer: {
         flex: 1,
         justifyContent: 'center',
@@ -299,8 +299,8 @@ With the hook in place, you can now use `breakpoints` and `media-queries`.
 Additionally, to access the `theme` use a function instead of an  `object`:
 
 ```diff
--const stylesheet = createStyles({
-+const stylesheet = createStyles(theme => ({
+-const stylesheet = createStyleSheet({
++const stylesheet = createStyleSheet(theme => ({
     scrollContainer: {
         flex: 1,
         justifyContent: 'center',

example/src/examples/Breakpoints.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Text, View } from 'react-native'
-import { createStyles, useStyles } from '../styles'
+import { createStyleSheet, useStyles } from '../styles'
 
 // Use breakpoints for some values
 export const Breakpoints: React.FunctionComponent = () => {
@@ -18,7 +18,7 @@ export const Breakpoints: React.FunctionComponent = () => {
     )
 }
 
-const stylesheet = createStyles(theme => ({
+const stylesheet = createStyleSheet(theme => ({
     dynamicContainer: {
         flex: 1,
         justifyContent: 'center',

example/src/examples/Extreme.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Text, View } from 'react-native'
-import { createStyles, useStyles } from '../styles'
+import { createStyleSheet, useStyles } from '../styles'
 
 // Edge cases
 export const Extreme: React.FunctionComponent = () => {
@@ -15,7 +15,7 @@ export const Extreme: React.FunctionComponent = () => {
     )
 }
 
-const stylesheet = createStyles(theme => ({
+const stylesheet = createStyleSheet(theme => ({
     // dynamic function with hints
     dynamicContainer: (flex: number) => ({
         flex,

example/src/examples/MediaQueries.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Text, View } from 'react-native'
-import { createStyles, useStyles } from '../styles'
+import { createStyleSheet, useStyles } from '../styles'
 
 // Media queries
 export const MediaQueries: React.FunctionComponent = () => {
@@ -18,7 +18,7 @@ export const MediaQueries: React.FunctionComponent = () => {
     )
 }
 
-const stylesheet = createStyles(theme => ({
+const stylesheet = createStyleSheet(theme => ({
     dynamicContainer: {
         flex: 1,
         justifyContent: 'center',

example/src/examples/MinimalWithCreateStyles.tsx → example/src/examples/MinimalWithCreateStyleSheet.tsx

@@ -1,21 +1,21 @@
 import React from 'react'
 import { Text, View } from 'react-native'
-import { createStyles, useStyles } from '../styles'
+import { createStyleSheet, useStyles } from '../styles'
 
-// createStyles with StyleSheet.create compatible Object
-export const MinimalWithCreateStyles: React.FunctionComponent = () => {
+// createStyleSheet with StyleSheet.create compatible Object
+export const MinimalWithCreateStyleSheet: React.FunctionComponent = () => {
     const { styles } = useStyles(stylesheet)
 
     return (
         <View style={styles.container}>
             <Text style={styles.text}>
-                I'm just a minimal example with createStyles
+                I'm just a minimal example with createStyleSheet
             </Text>
         </View>
     )
 }
 
-const stylesheet = createStyles({
+const stylesheet = createStyleSheet({
     container: {
         flex: 1,
         justifyContent: 'center',

example/src/examples/Theme.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Text, View } from 'react-native'
-import { createStyles, useStyles } from '../styles'
+import { createStyleSheet, useStyles } from '../styles'
 
-// Injected theme to createStyles
+// Injected theme to createStyleSheet
 export const Theme: React.FunctionComponent = () => {
     const { styles } = useStyles(stylesheet)
 
@@ -15,7 +15,7 @@ export const Theme: React.FunctionComponent = () => {
     )
 }
 
-const stylesheet = createStyles(theme => ({
+const stylesheet = createStyleSheet(theme => ({
     container: {
         flex: 1,
         justifyContent: 'center',

example/src/examples/index.ts

@@ -1,5 +1,5 @@
 export { Minimal } from './Minimal'
-export { MinimalWithCreateStyles } from './MinimalWithCreateStyles'
+export { MinimalWithCreateStyleSheet } from './MinimalWithCreateStyleSheet'
 export { Theme } from './Theme'
 export { Breakpoints } from './Breakpoints'
 export { MediaQueries } from './MediaQueries'

example/src/styles/index.ts

@@ -2,7 +2,7 @@ import { createUnistyles } from 'react-native-unistyles'
 import { breakpoints } from './breakpoints'
 import { theme } from './theme'
 
-export const { useStyles, createStyles } = createUnistyles<typeof breakpoints, typeof theme>(breakpoints)
+export const { useStyles, createStyleSheet } = createUnistyles<typeof breakpoints, typeof theme>(breakpoints)
 
 export {
     theme

src/createUnistyles.ts

@@ -8,13 +8,23 @@ export const createUnistyles = <B extends Record<string, number>, T = {}>(breakp
     const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints)
 
     return {
+        /**
+         * @deprecated The method should not be used, proposed version by the community is createStyleSheet, will be removed in RC
+         */
         createStyles: <S extends CustomNamedStyles<S, B>, X>(styles: S | CustomNamedStyles<S, B> | X | ((theme: T) => X | CustomNamedStyles<X, B>)): S | X => {
             if (typeof styles === 'function') {
                 return styles as X
             }
 
             return styles as S
         },
+        createStyleSheet: <S extends CustomNamedStyles<S, B>, X>(styles: S | CustomNamedStyles<S, B> | X | ((theme: T) => X | CustomNamedStyles<X, B>)): S | X => {
+            if (typeof styles === 'function') {
+                return styles as X
+            }
+
+            return styles as S
+        },
         useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
             const theme = useContext(UnistylesContext) as T
             const dimensions = useDimensions()