diff --git a/docs/buildingSwipeList.md b/docs/buildingSwipeList.md index 130e14ed4..208a39a7d 100644 --- a/docs/buildingSwipeList.md +++ b/docs/buildingSwipeList.md @@ -12,133 +12,185 @@ Here is an example to show how easily and quickly we can use [react-native-swipe ```SnackPlayer name=SwipeList dependencies=react-native-swipe-list-view import React, { useState } from 'react'; -import { - Dimensions, - TouchableOpacity, - View, -} from 'react-native'; +import { Dimensions, TouchableOpacity, View } from 'react-native'; -import {NativeBaseProvider,Box, Text,Pressable,Heading,IconButton,Icon, HStack, Avatar } from 'native-base'; +import { + NativeBaseProvider, + Box, + Text, + Pressable, + Heading, + IconButton, + Icon, + HStack, + Avatar, + VStack, + Spacer, +} from 'native-base'; import { SwipeListView } from 'react-native-swipe-list-view'; -import { MaterialIcons,Ionicons } from '@expo/vector-icons'; +import { MaterialIcons, Ionicons, Entypo } from '@expo/vector-icons'; export default function App() { - const [mode, setMode] = useState('Basic'); - - return ( - - - Swipe list Example - - - - ); + const [mode, setMode] = useState('Basic'); + + return ( + + + + Inbox + + + + + ); } - function Basic() { - const [listData, setListData] = useState( - Array(20) - .fill('') - .map((_, i) => ({ key: `${i}`, text: `item #${i}` })) - ); - - const closeRow = (rowMap, rowKey) => { - if (rowMap[rowKey]) { - rowMap[rowKey].closeRow(); - } - }; - - const deleteRow = (rowMap, rowKey) => { - closeRow(rowMap, rowKey); - const newData = [...listData]; - const prevIndex = listData.findIndex(item => item.key === rowKey); - newData.splice(prevIndex, 1); - setListData(newData); - }; - - const onRowDidOpen = rowKey => { - console.log('This row opened', rowKey); - }; - - const renderItem = ({item, index}) => ( - - console.log('You touched me')} - alignItems= 'center' - bg="white" - borderBottomColor= 'trueGray.200' - borderBottomWidth= "1" - justifyContent= 'center' - height= "50" - underlayColor={'#AAA'} - _pressed={{ - bg:'trueGray.200' - }} - py={8} - > - - - - - {index} - - - {item.text} - - - - - - ); - - const renderHiddenItem = (data, rowMap) => ( - - closeRow(rowMap, data.item.key)} - _pressed={{ - opacity: 0.5 - }} - > - } color='white'/> - - deleteRow(rowMap, data.item.key)} - _pressed={{ - opacity: 0.5 - }} - > - } color="white" /> - - - ); - - return ( - - + const data = [ + { + id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba', + fullName: 'Afreen Khan', + timeStamp: '12:47 PM', + recentText: 'Good Day!', + avatarUrl: + 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500', + }, + { + id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63', + fullName: 'Sujitha Alexander', + timeStamp: '11:11 PM', + recentText: 'Cheer up, there!', + avatarUrl: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU', + }, + { + id: '58694a0f-3da1-471f-bd96-145571e29d72', + fullName: 'Anci Barroco', + timeStamp: '6:22 PM', + recentText: 'Good Day!', + avatarUrl: 'https://miro.medium.com/max/1400/0*0fClPmIScV5pTLoE.jpg', + }, + { + id: '68694a0f-3da1-431f-bd56-142371e29d72', + fullName: 'Aniket Kumar', + timeStamp: '8:56 PM', + recentText: 'All the best', + avatarUrl: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr01zI37DYuR8bMV5exWQBSw28C1v_71CAh8d7GP1mplcmTgQA6Q66Oo--QedAN1B4E1k&usqp=CAU', + }, + { + id: '28694a0f-3da1-471f-bd96-142456e29d72', + fullName: 'Kiara', + timeStamp: '12:47 PM', + recentText: 'I will call him today.', + avatarUrl: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU', + }, + ]; + + const [listData, setListData] = useState(data); + + const closeRow = (rowMap, rowKey) => { + if (rowMap[rowKey]) { + rowMap[rowKey].closeRow(); + } + }; + + const deleteRow = (rowMap, rowKey) => { + closeRow(rowMap, rowKey); + const newData = [...listData]; + const prevIndex = listData.findIndex((item) => item.key === rowKey); + newData.splice(prevIndex, 1); + setListData(newData); + }; + + const onRowDidOpen = (rowKey) => { + console.log('This row opened', rowKey); + }; + + const renderItem = ({ item, index }) => ( + + console.log('You touched me')} bg="white"> + + + + + + {item.fullName} + + {item.recentText} + + + + {item.timeStamp} + + - ); + + + ); + + const renderHiddenItem = (data, rowMap) => ( + + closeRow(rowMap, data.item.key)} + _pressed={{ + opacity: 0.5, + }}> + + } + size="xs" + color="coolGray.800" + /> + + More + + + + deleteRow(rowMap, data.item.key)} + _pressed={{ + opacity: 0.5, + }}> + + } color="white" size="xs" /> + + Delete + + + + + ); + + return ( + + + + ); } + ``` diff --git a/docs/utilityProps.md b/docs/utilityProps.md index da84424a5..6eb0b4a94 100644 --- a/docs/utilityProps.md +++ b/docs/utilityProps.md @@ -69,36 +69,39 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center, Text } from 'native-base'; const Box = (props) => { - return -} + return ; +}; function Component() { return ( <> - { /* raw CSS color value */ } - - { /* picks up a nested color value using dot notation */ } - { /* => `theme.colors.lightBlue[300]` */ } - - { /* using theme colors to set text color */ } - I ❤️ NativeBase + {/* raw CSS color value */} + + {/* picks up a nested color value using dot notation */} + {/* => `theme.colors.lightBlue[300]` */} + + {/* using theme colors to set text color */} + + {' '} + I love NativeBase + - { /* verbose prop */ } - + {/* verbose prop */} + ); } export default function () { return ( -
+
); } + ```
@@ -114,7 +117,7 @@ export default function () { :::tip Note -Above props can be written in the format: {color}:alpha-{opacityToken}, this gets converted into RGBA color format and the opacityToken is mapped to [`Opacity`](default-theme#opacity) +Above props can be written in the format: {color}:alpha-{opacityToken}, this gets converted into RGBA color format and the opacityToken is mapped to [`Opacity`](default-theme#opacity) ::: @@ -178,15 +181,15 @@ const Text = (props) => { function Component() { return ( <> - { /* font-size of `theme.fontSizes.md` */ } - Sample Text - { /* font-size `32px` */ } - Sample Text + { /* font-size of `theme.fontSizes.2xl` */ } + Thank You + { /* text decoration `underline` */ } + Merci Beaucoup { /* font-size `'2em'` */ } - { /* font-size of `theme.fontWeights.bold` */ } - Sample Text - { /* text-align `left` on all viewports and `center` from the first breakpoint and up */ } - Sample Text + { /* font-weight of `theme.fontWeights.semibold i.e. 600` */ } + Danke sehr + { /* letter-spacing `0.1 em` */ } + Arigatou ); } @@ -337,28 +340,29 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return -} + return ; +}; function Component() { return ( <> - - - + + + ); } export default function () { return ( -
+
); } + ```
@@ -393,7 +397,7 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return + return } function Component() { @@ -443,15 +447,15 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return + return } function Component() { return ( <> - - + + ); } @@ -485,7 +489,7 @@ import React from 'react'; import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; const Box = (props) => { - return + return } function Component() { @@ -533,12 +537,13 @@ function Example() { ); } @@ -573,15 +578,16 @@ import { Button, NativeBaseProvider, Center } from 'native-base'; function Example() { return ( ); } @@ -618,18 +624,24 @@ import { Button, NativeBaseProvider, Center } from 'native-base'; function Example() { return ( - + color: 'warmGray.50', + }, + }, + }}> + Save + ); }