Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/waynekim92/react-native-good-ui
good UI that supports react-native based android, ios and web. [ Not Maintained ]
https://github.com/waynekim92/react-native-good-ui
component react react-native react-native-web
Last synced: about 4 hours ago
JSON representation
good UI that supports react-native based android, ios and web. [ Not Maintained ]
- Host: GitHub
- URL: https://github.com/waynekim92/react-native-good-ui
- Owner: WayneKim92
- License: mit
- Created: 2022-12-29T05:27:07.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-01T16:23:50.000Z (8 months ago)
- Last Synced: 2024-09-10T13:53:07.204Z (about 2 months ago)
- Topics: component, react, react-native, react-native-web
- Language: TypeScript
- Homepage:
- Size: 676 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# good-ui
good UI that supports react-native based android, ios and web
## Requirement
```sh
# Enter commend in root directory at your react-native project
# If you want to use it in Web, refer to https://docs.expo.dev/versions/latest/sdk/reanimated/
yarn add react-native-reanimated
```
## Installation
```sh
yarn add react-native-good-ui
```
## Usage
```jsx
import React, { useState } from 'react';
import { StyleSheet, ViewStyle } from 'react-native';
import {
Button,
Column,
Divider,
EdgeInsets,
Input,
Row,
Select,
Spacer,
Text,
ZIndex,
storage,
} from 'react-native-good-ui';
import {
useSharedValue,
useAnimatedStyle,
withSpring,
} from 'react-native-reanimated';
import type { AnimateStyle } from 'react-native-reanimated';
const storageKey = '@storage_test';
export default function App() {
const [storageValue, setStorageValue] = useState('');
React.useEffect(() => {
const fetch = async () => {
const aStorage = await storage.load(storageKey);
if (aStorage) {
setStorageValue(
`Storage Value : ${aStorage}, but it will be removed in the next run.`
);
await storage.remove(storageKey);
} else {
await storage.save(storageKey, 'hello world');
setStorageValue(
`Storage Value : null, but It will be present in the next run.`
);
}
};
fetch().then();
}, []);
const offset = useSharedValue(0);
const animatedStyles = useAnimatedStyle(() => {
return {
transform: [{ translateX: offset.value }],
} as AnimateStyle;
});
const body = (
Components
Divider
Select
console.log(option)}
/>
console.log(option)}
/>
Button
console.log('onPress')} />
Input
Storage
{storageValue}
Animated View
{
offset.value = withSpring(Math.random() * 255);
}}
text={'Move'}
/>
Layout
Text
header1
header2
header3
header4
header5
header6
subtitle1
subtitle2
body1
body2
caption
overline
);
return (
{body}
{body}
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexShrink: 1,
alignItems: 'stretch',
backgroundColor: 'white',
},
container2: {
flex: 1,
flexShrink: 1,
alignItems: 'flex-start',
backgroundColor: 'white',
},
box: {
width: 100,
height: 100,
backgroundColor: '#6DB32A',
justifyContent: 'center',
alignItems: 'center',
},
layout1: {
backgroundColor: 'red',
width: 100,
height: 100,
},
layout2: {
backgroundColor: 'yellow',
width: 50,
height: 50,
},
});
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)