chore: add more examples and list them in readme

This commit is contained in:
Jakub Grzywacz 2021-07-20 12:19:41 +02:00
parent 33685fe832
commit 5e914c7f17
No known key found for this signature in database
GPG Key ID: 5BBB685871FF63C4
11 changed files with 166 additions and 31 deletions

View File

@ -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

View File

@ -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>
);

View File

@ -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;

View File

@ -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>
);

View File

@ -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;

View File

@ -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;