chore: add more examples and list them in readme
This commit is contained in:
parent
33685fe832
commit
5e914c7f17
43
README.md
43
README.md
|
@ -90,37 +90,18 @@ translation={{
|
|||
}}
|
||||
```
|
||||
*If you have written a translation into your language, we strongly encourage you to create a Pull Request and add your language to the package, following the example of other langs.*
|
||||
## 📚 Full Example
|
||||
```ts
|
||||
import * as React from 'react';
|
||||
import { Text, SafeAreaView, TouchableOpacity } from 'react-native';
|
||||
import EmojiPicker from 'rn-emoji-keyboard';
|
||||
import { EmojiType } from 'rn-emoji-keyboard/lib/typescript/types';
|
||||
|
||||
export default function App() {
|
||||
const [result, setResult] = React.useState<string>();
|
||||
const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);
|
||||
|
||||
const handlePick = (emojiObject: EmojiType) => {
|
||||
setResult(emojiObject.emoji);
|
||||
setIsModalOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<Text>Selected emoji: {result}</Text>
|
||||
<TouchableOpacity onPress={() => setIsModalOpen(true)}>
|
||||
<Text>Open</Text>
|
||||
</TouchableOpacity>
|
||||
<EmojiPicker
|
||||
onEmojiSelected={handlePick}
|
||||
open={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
```
|
||||
## 🎉 Examples
|
||||
You can clone the repo and run `yarn example ios` or `yarn example android` to preview app with this examples.
|
||||
#### Basic
|
||||
![Preview](/example/assets/light-preview.jpg)
|
||||
#### Dark
|
||||
![Preview](/example/assets/dark-preview.jpg)
|
||||
#### Translated
|
||||
![Preview](/example/assets/translated-preview.jpg)
|
||||
#### DisabledCategories
|
||||
![Preview](/example/assets/categories-preview.jpg)
|
||||
#### Static (without knob)
|
||||
![Preview](/example/assets/static-preview.jpg)
|
||||
## 📈 Future plans
|
||||
* Skin tone palette selector.
|
||||
* Search bar.
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
After Width: | Height: | Size: 140 KiB |
Binary file not shown.
After Width: | Height: | Size: 139 KiB |
Binary file not shown.
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
After Width: | Height: | Size: 46 KiB |
|
@ -5,6 +5,9 @@ import { createStackNavigator } from '@react-navigation/stack';
|
|||
import Examples from './Examples/Examples';
|
||||
import Basic from './Basic/Basic';
|
||||
import Dark from './Dark/Dark';
|
||||
import Translated from './Translated/Translated';
|
||||
import DisabledCategories from './DisabledCategories/DisabledCategories';
|
||||
import Static from './Static/Static';
|
||||
|
||||
const Stack = createStackNavigator();
|
||||
export default () => {
|
||||
|
@ -14,6 +17,12 @@ export default () => {
|
|||
<Stack.Screen name="Examples" component={Examples} />
|
||||
<Stack.Screen name="Basic" component={Basic} />
|
||||
<Stack.Screen name="Dark" component={Dark} />
|
||||
<Stack.Screen name="Translated" component={Translated} />
|
||||
<Stack.Screen
|
||||
name="DisabledCategories"
|
||||
component={DisabledCategories}
|
||||
/>
|
||||
<Stack.Screen name="Static" component={Static} />
|
||||
</Stack.Navigator>
|
||||
</NavigationContainer>
|
||||
);
|
||||
|
|
|
@ -0,0 +1,44 @@
|
|||
import * as React from 'react';
|
||||
import { StyleSheet, Text, TouchableOpacity } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import EmojiPicker from 'rn-emoji-keyboard';
|
||||
import type { EmojiType } from 'src/types';
|
||||
|
||||
const DisabledCategories = () => {
|
||||
const [result, setResult] = React.useState<string>();
|
||||
const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);
|
||||
|
||||
const handlePick = (emoji: EmojiType) => {
|
||||
console.log(emoji);
|
||||
setResult(emoji.emoji);
|
||||
setIsModalOpen((prev) => !prev);
|
||||
};
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<Text style={styles.text}>Result: {result}</Text>
|
||||
<TouchableOpacity onPress={() => setIsModalOpen(true)}>
|
||||
<Text style={styles.text}>Open</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<EmojiPicker
|
||||
onEmojiSelected={handlePick}
|
||||
open={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
disabledCategory={['activities', 'flags', 'objects', 'symbols']}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
text: {
|
||||
textAlign: 'center',
|
||||
margin: 64,
|
||||
fontSize: 18,
|
||||
},
|
||||
});
|
||||
|
||||
export default DisabledCategories;
|
|
@ -7,6 +7,9 @@ type RootStackParamList = {
|
|||
Examples: undefined;
|
||||
Basic: undefined;
|
||||
Dark: undefined;
|
||||
Translated: undefined;
|
||||
DisabledCategories: undefined;
|
||||
Static: undefined;
|
||||
};
|
||||
|
||||
type Props = StackScreenProps<RootStackParamList, 'Examples'>;
|
||||
|
@ -17,6 +20,15 @@ const Examples = ({ navigation }: Props) => {
|
|||
<View>
|
||||
<Button title="Basic" onPress={() => navigation.navigate('Basic')} />
|
||||
<Button title="Dark" onPress={() => navigation.navigate('Dark')} />
|
||||
<Button
|
||||
title="Translated"
|
||||
onPress={() => navigation.navigate('Translated')}
|
||||
/>
|
||||
<Button
|
||||
title="DisabledCategories"
|
||||
onPress={() => navigation.navigate('DisabledCategories')}
|
||||
/>
|
||||
<Button title="Static" onPress={() => navigation.navigate('Static')} />
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
|
|
|
@ -0,0 +1,45 @@
|
|||
import * as React from 'react';
|
||||
import { StyleSheet, Text, TouchableOpacity } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import EmojiPicker from 'rn-emoji-keyboard';
|
||||
import type { EmojiType } from 'src/types';
|
||||
|
||||
const Static = () => {
|
||||
const [result, setResult] = React.useState<string>();
|
||||
const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);
|
||||
|
||||
const handlePick = (emoji: EmojiType) => {
|
||||
console.log(emoji);
|
||||
setResult(emoji.emoji);
|
||||
setIsModalOpen((prev) => !prev);
|
||||
};
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<Text style={styles.text}>Result: {result}</Text>
|
||||
<TouchableOpacity onPress={() => setIsModalOpen(true)}>
|
||||
<Text style={styles.text}>Open</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<EmojiPicker
|
||||
onEmojiSelected={handlePick}
|
||||
open={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
expandable={false}
|
||||
defaultHeight="65%"
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
text: {
|
||||
textAlign: 'center',
|
||||
margin: 64,
|
||||
fontSize: 18,
|
||||
},
|
||||
});
|
||||
|
||||
export default Static;
|
|
@ -0,0 +1,44 @@
|
|||
import * as React from 'react';
|
||||
import { StyleSheet, Text, TouchableOpacity } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import EmojiPicker, { pl } from 'rn-emoji-keyboard';
|
||||
import type { EmojiType } from 'src/types';
|
||||
|
||||
const Translated = () => {
|
||||
const [result, setResult] = React.useState<string>();
|
||||
const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);
|
||||
|
||||
const handlePick = (emoji: EmojiType) => {
|
||||
console.log(emoji);
|
||||
setResult(emoji.emoji);
|
||||
setIsModalOpen((prev) => !prev);
|
||||
};
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<Text style={styles.text}>Emotka: {result}</Text>
|
||||
<TouchableOpacity onPress={() => setIsModalOpen(true)}>
|
||||
<Text style={styles.text}>Otwórz</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<EmojiPicker
|
||||
onEmojiSelected={handlePick}
|
||||
open={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
translation={pl}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
text: {
|
||||
textAlign: 'center',
|
||||
margin: 64,
|
||||
fontSize: 18,
|
||||
},
|
||||
});
|
||||
|
||||
export default Translated;
|
Loading…
Reference in New Issue