CryptoZone

import OptionBar from '../components/ActionSheet/OptionBar';

const refRBSheet = useRef();

<RBSheet
	ref={refRBSheet}
	closeOnDragDown={true}
	height={270}
	openDuration={100}
	customStyles={{
		wrapper: {
		},
		container:{
			backgroundColor: colors.bgLight,
			borderTopLeftRadius:15,
			borderTopRightRadius:15,
		},
		draggableIcon: {
			marginTop:5,
			marginBottom:0,
			height:5,
			width:90,
			backgroundColor: colors.borderColor,
		}
	}}
>
	<OptionBar/> 
</RBSheet>

import SuccessModal from '../components/Modal/SuccessModal';

const [modalVisible, setModalVisible] = useState(false);

<Modal
	animationType="slide"
	transparent={true}
	visible={modalVisible}
> 
	<View style={{
		alignItems:'center',
		justifyContent:'center',
		flex:1,
		position:'relative',
	}}> 
		<TouchableOpacity
			activeOpacity={1}
			onPress={() => setModalVisible(false)}
			style={{
				position:'absolute',
				height:'100%',
				width:'100%',
				backgroundColor:'rgba(0,0,0,.3)',
			}}
		/> 
			<SuccessModal/> 
		</View> 
</Modal> 

import Button from '../components/Button/Button';
import ButtonLight from '../components/Button/ButtonLight';
import ButtonOutline from '../components/Button/ButtonOutline';
import ButtonSm from '../components/Button/ButtonSm';
import ButtonLg from '../components/Button/ButtonLg';

{/* default button */}
<Button title={'Button'}/>

{/* button with custom color */}
<Button color={COLORS.secondary} title={'Button'}/>

{/* Squar button */}
<Button btnSquare title={'Button'}/>

{/* Rounded button */}
<Button btnRounded title={'Button'}>

{/* Button with Light Color */}
<ButtonLight title={'Button'}/>

{/* Button with Border */}
<ButtonOutline  title={'Button'}/>

{/* Large Button */}
<ButtonLg title={'Large Button'}/>

{/* Small Button */}
<ButtonSm title={'Small Button'}/>

import Collapsible from 'react-native-collapsible';

import FontAwesome from "react-native-vector-icons/FontAwesome";

import ListStyle1 from '../components/list/ListStyle1';

const [isCollapsed , setIsCollapsed] = useState(true);
const [isCollapsed2 , setIsCollapsed2] = useState(true);

<Collapsible collapsed={isCollapsed}>
	<View style={{paddingBottom:15}}>
		<Text style={{...FONTS.font,color:colors.text}}>
			Lorem ipsum sit amet is the dummy text.
		</Text>
	</View>
</Collapsible>
<Button 
	onPress={() => setIsCollapsed(!isCollapsed)}
	title={'Tap me'}
/>

<View>
	<ListStyle1
		arrowDown
		onPress={() => setIsCollapsed2(!isCollapsed2)}
		icon={<FontAwesome name={'share-alt'} size={15} color={COLORS.danger} />}
		title={'Social'}
	/>
	<Collapsible collapsed={isCollapsed2}>
		<View style={{paddingLeft:20}}>
			<ListStyle1
				arrowRight
				icon={<FontAwesome name={'facebook-official'} size={15} color={'#3b5998'} />}
				title={'Facebook'}
			/>
			<ListStyle1
				arrowRight
				icon={<FontAwesome name={'twitter-square'} size={15} color={'#4099ff'} />}
				title={'Twitter'}
			/>
			<ListStyle1
				arrowRight
				icon={<FontAwesome name={'linkedin-square'} size={15} color={'#0077b5'} />}
				title={'Linkdin'}
			/>
		</View>
	</Collapsible>
</View>

import FeatherIcon from 'react-native-vector-icons/Feather';

import Divider from '../components/Dividers/Divider';
import DividerIcon from '../components/Dividers/DividerIcon';

{/* Default Divider */}
<Divider/>

{/* Divider with custom color */}
<Divider color={COLORS.danger}/>

{/* Divider with dashed style */}
<Divider dashed/>

{/* Divider with icon */}
<DividerIcon icon={<FeatherIcon name={'x'} color={colors.text} size={18}/>}/>

import ListStyle1 from '../components/list/ListStyle1';
import ListStyle2 from '../components/list/ListStyle2';

{/* Default List */}
<ListStyle1 arrowRight title={'Accordion'}/>

{/* List with Icon */}
<ListStyle1 
	arrowRight 
	icon={<FontAwesome name={'share-alt'} size={15} color={COLORS.danger} />}
	title={'Social'}
/>

{/* List with Image */}
<ListStyle1 
	arrowRight 
	image={IMAGES.userPic}
	title={'James'}
/>

{/* List with description */}
<ListStyle2
	icon={<SvgXml xml={table}/>}
	title="Accordions"
	desc="Use for compacting content"
/>

import Snackbar from 'react-native-snackbar';


const ShowSnackbarSuccess = () => {
	Snackbar.show({
		text: 'Confirmed',
		backgroundColor: COLORS.success,
		duration: Snackbar.LENGTH_SHORT,
	});
}
const ShowSnackbarWarning = () => {
	Snackbar.show({
		text: "Something's wrong!",
		backgroundColor: COLORS.warning,
		duration: Snackbar.LENGTH_SHORT,
	});
}
const ShowSnackbarInfo = () => {
	Snackbar.show({
		text: "We're on it",
		backgroundColor: COLORS.info,
		duration: Snackbar.LENGTH_SHORT,
	});
}
const ShowSnackbarError = () => {
	Snackbar.show({
		text: 'Error Occured',
		backgroundColor: COLORS.danger,
		duration: Snackbar.LENGTH_SHORT,
	});
}