react-native-boxes 1.0.0

package/src/Box.tsx

@@ -0,0 +1,106 @@
+import { useContext } from "react";
+import { ScrollViewProps, View, ViewProps } from "react-native";
+import { ThemeContext } from "./ThemeContext";
+import * as React from 'react'
+import { KeyboardAvoidingView, ScrollView } from 'react-native'
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { isWeb } from "./utils";
+
+export function Box(props: ViewProps) {
+    const theme = useContext(ThemeContext)
+    return (
+        <View
+            {...props}
+            style={[
+                {
+                    padding: theme.dimens.space.xs,
+                    backgroundColor: theme.randomColor() || 'transparent'
+                },
+                props.style
+            ]} />
+    )
+}
+
+export function VBox(props: ViewProps) {
+    const theme = useContext(ThemeContext)
+    return (
+        <Box  {...props} style={[
+            {
+                flexDirection: 'column',
+                backgroundColor: theme.randomColor() || 'transparent'
+            },
+            props.style
+        ]} />
+    )
+}
+
+export function HBox(props: ViewProps) {
+
+    return (
+        <VBox {...props} style={[
+            {
+                flexDirection: 'row',
+            },
+            props.style
+        ]} />
+    )
+}
+
+export function Center(props: ViewProps) {
+    const theme = useContext(ThemeContext)
+    return (
+        <Box
+            {...props}
+            style={[{
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: theme.randomColor() || 'transparent'
+            },
+            props.style]} />
+    )
+}
+
+
+export function VPage(props: ViewProps) {
+    const theme = useContext(ThemeContext)
+    return (
+        <VBox  {...props} style={[
+            {
+                width: '100%',
+                height: '100%',
+                padding: 0,
+                margin: 0,
+            },
+            props.style
+        ]} />
+    )
+}
+
+/**
+ * Must be wrapped with SafeAreaView somewhere in parent tree
+ * @param param0 
+ * @returns 
+ */
+const KeyboardAvoidingScrollView: React.FC<ScrollViewProps> = (props: ScrollViewProps) => {
+
+    const insets = useSafeAreaInsets();
+    if (isWeb()) {
+        return <ScrollView
+            showsVerticalScrollIndicator={false}
+            {...props} />
+    }
+    return (
+        <KeyboardAvoidingView
+            style={props.style}
+            behavior="padding" enabled
+            keyboardVerticalOffset={insets.top}
+        >
+            <ScrollView
+                showsHorizontalScrollIndicator={false}
+                showsVerticalScrollIndicator={false}
+                {...props} />
+        </KeyboardAvoidingView>
+    )
+}
+
+export default KeyboardAvoidingScrollView

package/src/Button.tsx

@@ -0,0 +1,282 @@
+import { useContext, useEffect, useState } from "react";
+import { TextProps, TouchableHighlight, GestureResponderEvent, TouchableHighlightProps, View, ActivityIndicator, LayoutAnimation, PressableProps, Pressable } from "react-native";
+import { ThemeContext } from "./ThemeContext";
+import { Center, HBox } from "./Box";
+import { TextView } from "./Text";
+
+export function TransparentButton(props: TextProps & TouchableHighlightProps
+    & { icon?: any, text?: string }) {
+    const theme = useContext(ThemeContext)
+    const tstyle = props.style || {}
+    const [isPressed, setIsPressed] = useState(false)
+    const onPressIn = (e: GestureResponderEvent) => {
+        setIsPressed(true)
+        if (props.onPressIn) props.onPressIn(e)
+    }
+    const onPressOut = (e: GestureResponderEvent) => {
+        setIsPressed(false)
+        if (props.onPressOut) props.onPressOut(e)
+    }
+    return (
+        <TouchableHighlight
+            {...props}
+            onPressIn={onPressIn}
+            onPressOut={onPressOut}
+            underlayColor={theme.colors.transparent}
+            style={[{
+                justifyContent: 'center',
+                alignContent: 'center',
+                alignItems: 'center',
+                padding: theme.dimens.space.md,
+                borderRadius: theme.dimens.space.xl,
+                margin: theme.dimens.space.sm,
+                backgroundColor: theme.colors.accent,
+            }, props.style]}>
+            <Center style={{
+                padding: 0,
+                margin: 0,
+                flexDirection: 'row',
+                backgroundColor: 'transparent'
+            }}>
+
+                {
+                    props.icon && (
+                        <View style={{
+                            margin: theme.dimens.space.sm
+                        }}>
+                            {props.icon}
+                        </View>
+                    )
+                }
+
+                {
+                    (props.text || props.children) && (
+                        <TextView style={{
+                            fontWeight: "500",
+                            justifyContent: 'center',
+                            alignContent: 'center',
+                            alignItems: 'center',
+                            //@ts-ignore
+                            fontSize: tstyle.fontSize,
+                            //@ts-ignore
+                            fontFamily: tstyle.fontFamily,
+                            //@ts-ignore
+                            color: isPressed ? (props.underlayColor || theme.colors.accent) : tstyle.color || theme.colors.text,
+                        }}>
+                            {props.text || props.children}
+                        </TextView>
+                    )
+                }
+            </Center>
+        </TouchableHighlight>
+    )
+}
+
+export function ButtonView(props: TextProps & TouchableHighlightProps
+    & { icon?: any, text?: string }) {
+    const theme = useContext(ThemeContext)
+    const tstyle = props.style || {}
+    const [isPressed, setIsPressed] = useState(false)
+    const onPressIn = (e: GestureResponderEvent) => {
+        setIsPressed(true)
+        if (props.onPressIn) props.onPressIn(e)
+    }
+    const onPressOut = (e: GestureResponderEvent) => {
+        setIsPressed(false)
+        if (props.onPressOut) props.onPressOut(e)
+    }
+    return (
+        <TouchableHighlight
+            {...props}
+            onPressIn={onPressIn}
+            onPressOut={onPressOut}
+            underlayColor={props.underlayColor || theme.colors.accentLight}
+            style={[{
+                justifyContent: 'center',
+                alignContent: 'center',
+                alignItems: 'center',
+                padding: theme.dimens.space.md,
+                borderRadius: theme.dimens.space.xl,
+                margin: theme.dimens.space.sm,
+                backgroundColor: theme.colors.accent,
+            }, props.style]}>
+            <Center style={{
+                padding: 0,
+                margin: 0,
+                flexDirection: 'row',
+                backgroundColor: 'transparent'
+            }}>
+
+                {
+                    props.icon && (
+                        <View style={{
+                            margin: theme.dimens.space.sm
+                        }}>
+                            {props.icon}
+                        </View>
+                    )
+                }
+
+                {
+                    (props.text || props.children) && (
+                        <TextView style={{
+                            opacity: isPressed ? .7 : 1,
+                            fontWeight: "500",
+                            justifyContent: 'center',
+                            alignContent: 'center',
+                            alignItems: 'center',
+                            //@ts-ignore
+                            fontSize: tstyle.fontSize,
+                            //@ts-ignore
+                            fontFamily: tstyle.fontFamily,
+                            //@ts-ignore
+                            color: tstyle.color || theme.colors.invert.text,
+                        }}>
+                            {props.text || props.children}
+                        </TextView>
+                    )
+                }
+            </Center>
+        </TouchableHighlight>
+    )
+}
+
+
+export function RightIconButton(props: TextProps & TouchableHighlightProps
+    & { icon?: any, text?: string }) {
+
+    const theme = useContext(ThemeContext)
+    const tstyle = props.style || {}
+    const [isPressed, setIsPressed] = useState(false)
+    const onPressIn = (e: GestureResponderEvent) => {
+        setIsPressed(true)
+        if (props.onPressIn) props.onPressIn(e)
+    }
+    const onPressOut = (e: GestureResponderEvent) => {
+        setIsPressed(false)
+        if (props.onPressOut) props.onPressOut(e)
+    }
+    return (
+        <TouchableHighlight
+            {...props}
+            onPressIn={onPressIn}
+            onPressOut={onPressOut}
+            underlayColor={props.underlayColor || theme.colors.accentLight}
+            style={[{
+                justifyContent: 'center',
+                alignContent: 'center',
+                alignItems: 'center',
+                padding: theme.dimens.space.md,
+                borderRadius: theme.dimens.space.xl,
+                margin: theme.dimens.space.sm,
+                backgroundColor: theme.colors.accent,
+            }, props.style]}>
+
+            <HBox style={{
+                padding: 0,
+                margin: 0,
+                alignItems: 'center',
+                backgroundColor: 'transparent',
+                width: '100%',
+                paddingLeft: theme.dimens.space.sm,
+                paddingRight: theme.dimens.space.sm,
+            }}>
+                <Center style={{
+                    padding: 0,
+                    margin: 0,
+                    flexDirection: 'row',
+                    backgroundColor: 'transparent'
+                }}>
+
+                    {
+                        (props.text) && (
+                            <TextView style={{
+                                marginRight: theme.dimens.space.lg,
+                                justifyContent: 'center',
+                                alignContent: 'center',
+                                alignItems: 'center',
+                                //@ts-ignore
+                                fontSize: tstyle.fontSize,
+                                //@ts-ignore
+                                fontFamily: tstyle.fontFamily,
+                                //@ts-ignore
+                                color: tstyle.color || theme.colors.invert.text,
+                            }}>
+                                {props.text}
+                            </TextView>
+                        )
+                    }
+                    {props.children}
+
+                </Center>
+                {
+                    props.icon && (
+                        <View style={{
+                            position: 'absolute',
+                            right: 0,
+                            margin: theme.dimens.space.sm
+                        }}>
+                            {props.icon}
+                        </View>
+                    )
+                }
+
+            </HBox>
+        </TouchableHighlight>
+    )
+
+}
+
+
+export function LoadingButton(props: TextProps & TouchableHighlightProps
+    & {
+        loading: boolean,
+        icon?: any,
+        text?: string,
+        loaderStyle?: 'normal' | 'transparent'
+    }) {
+    const theme = useContext(ThemeContext)
+    const [_loading, _setIsLoading] = useState(props.loading)
+    useEffect(() => {
+        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+        if (props.loading != _loading)
+            _setIsLoading(props.loading)
+    }, [props.loading]);
+    let loaderColor = theme.colors.invert.text
+    let loaderSize = theme.dimens.icon.md
+    let btnBg = theme.colors.accent
+    let btnBgPressed = theme.colors.accentLight
+
+    if (_loading && props.loaderStyle == 'transparent') {
+        loaderColor = theme.colors.accent
+        btnBg = theme.colors.transparent
+        btnBgPressed = theme.colors.transparent
+        loaderSize = theme.dimens.icon.lg
+    }
+    return (
+        <ButtonView
+            {...props}
+            underlayColor={btnBgPressed}
+            style={[{
+                width: _loading ? '100%' : '100%',
+                backgroundColor: btnBg,
+                padding: _loading && props.loaderStyle == 'transparent' ?
+                    theme.dimens.space.sm : theme.dimens.space.md
+            }, props.style]}
+            icon={_loading ?
+                <ActivityIndicator
+                    size={loaderSize}
+                    color={loaderColor} />
+                : undefined
+            }
+            text={!_loading ? props.text : undefined} />
+    )
+}
+
+
+
+export function PressableView(props: PressableProps) {
+
+    //@ts-ignore
+    return (<Pressable {...props} style={({ pressed }) => [{ opacity: pressed ? 0.7 : 1.0 }, props.style]} />)
+}

package/src/Image.tsx

@@ -0,0 +1,107 @@
+import { Image, Pressable, ViewProps } from "react-native";
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { useContext } from "react";
+import { ThemeContext } from "./ThemeContext";
+import { Center } from "./Box";
+import { Subtitle } from "./Text";
+
+export type IconProps = {
+    name: any,
+    size?: number,
+    color?: string
+}
+export function Icon(props: ViewProps & IconProps) {
+    const theme = useContext(ThemeContext)
+    return (
+        <FontAwesome {...props}
+            size={props.size || theme.dimens?.icon?.md}
+            color={props.color || theme.colors?.text}
+        />
+    )
+}
+
+
+/**
+ * 
+ * @param props provide one of iconUrl , iconName , iconText
+ * @returns 
+ */
+export function Avatar(props: ViewProps & {
+    onPress?: Function,
+    iconUrl?: string,
+    iconName?: string,
+    iconText?: string,
+    iconNameProps?: IconProps,
+    style?: any
+}) {
+    const theme = useContext(ThemeContext)
+    const view = <Center style={[{
+        margin: theme.dimens.space.sm,
+        overflow: 'hidden',
+        borderRadius: 100,
+        width: theme.dimens.icon.xl,
+        height: theme.dimens.icon.xl,
+        borderWidth: theme.dimens.space.xs * 2,
+        borderStyle: 'solid',
+        borderColor: theme.colors.accentLight,
+        backgroundColor: theme.colors.forground,
+    }, props.style]}>
+        <Center style={{
+            width: '110%',
+            height: '110%',
+        }}>
+            {
+                (() => {
+                    if (props.iconUrl)
+                        return (
+                            <Image
+                                style={{
+                                    width: '120%',
+                                    height: '120%',
+                                }}
+                                source={{
+                                    uri: props.iconUrl,
+                                }}
+                            />)
+                    if (props.iconName || props.iconNameProps?.name)
+                        return (
+                            <Icon
+                                name={props.iconName || props.iconNameProps?.name}
+                                {...props.iconNameProps} />
+                        )
+                    if (props.iconText)
+                        return (
+                            <Subtitle style={{
+                                color: props.style?.color || theme.colors.accentLight,
+                            }}>{props.iconText?.substring(0, 2)}</Subtitle>
+                        )
+                })()
+            }
+        </Center>
+    </Center>
+    if (props.onPress)
+        return (
+            <Pressable onPress={() => {
+                if (props.onPress)
+                    props.onPress()
+            }}>
+                {view}
+            </Pressable>
+        )
+    return view
+}
+
+
+export function getIcon(input: any) {
+    if (input == undefined) {
+        return undefined
+    }
+    if (typeof input == 'string') {
+        return (props: IconProps) => {
+            return (
+                <Icon  {...props} name={props.name || input} />
+            )
+        }
+    }
+    return input
+}