react-native#View TypeScript Examples

The following examples show how to use react-native#View. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From react-native-gifted-charts with MIT License 6 votes vote down vote up
TriangleCorner = (props: trianglePropTypes) => {
  return (
    <View
      style={[
        triangleStyles.triangleCorner,
        props.style,
        {
          borderRightWidth: props.width / 2,
          borderTopWidth: props.width / 2,
          borderTopColor: props.color,
        },
      ]}
    />
  );
}
Example #2
Source File: AgoraUIKit.tsx    From ReactNative-UIKit with MIT License 6 votes vote down vote up
AgoraUIKitv3: React.FC<PropsInterface> = (props) => {
  const {layout} = props.rtcProps;
  return (
    <PropsProvider value={props}>
      <View style={[containerStyle, props.styleProps?.UIKitContainer]}>
        <RtcConfigure>
          <LocalUserContext>
            {props.rtcProps.disableRtm ? (
              <>
                {layout === Layout.Grid ? <GridVideo /> : <PinnedVideo />}
                <LocalControls />
              </>
            ) : (
              <RtmConfigure>
                {layout === Layout.Grid ? <GridVideo /> : <PinnedVideo />}
                <LocalControls />
                <PopUp />
              </RtmConfigure>
            )}
          </LocalUserContext>
        </RtcConfigure>
      </View>
    </PropsProvider>
  );
}
Example #3
Source File: index.tsx    From react-native-masonry-scrollview with MIT License 6 votes vote down vote up
RNMasonryScrollView = ({
  children = [],
  columns = 2,
  columnStyle = null,
  oddColumnStyle = null,
  evenColumnStyle = null,
  horizontal,
  ...otherProps
}: RNMasonryScrollViewProps) => {
  const masonryGrid = generateMasonryGrid(children, columns);

  return (
    <ScrollView
      contentContainerStyle={
        horizontal ? styles.horizontalColumnStyle : styles.verticalColumnStyle
      }
      horizontal={horizontal}
      {...otherProps}
    >
      {masonryGrid.map((column, columnIndex) => {
        return (
          <View
            key={columnIndex}
            style={[
              !horizontal
                ? styles.horizontalColumnStyle
                : styles.verticalColumnStyle,
              columnStyle,
              columnIndex % 2 === 0 ? evenColumnStyle : oddColumnStyle
            ]}
          >
            {column.map(item => item)}
          </View>
        );
      })}
    </ScrollView>
  );
}
Example #4
Source File: App.tsx    From gobarber-mobile with MIT License 6 votes vote down vote up
App: React.FC = () => {
  return (
    <ThemeProvider theme={defaultTheme}>
      <NavigationContainer>
        <StatusBar barStyle="light-content" translucent />
        <AppProvider>
          <View style={{ backgroundColor: '#312e38', flex: 1 }}>
            <Routes />
          </View>
        </AppProvider>
      </NavigationContainer>
    </ThemeProvider>
  );
}
Example #5
Source File: Header.tsx    From happy with MIT License 6 votes vote down vote up
export default function Header({ title, showCancel = true }: HeaderProps) {
  const navigation = useNavigation();

  function handleGoBackToAppHomePage() {
    navigation.navigate('OrphanagesMap');
  }

  return (
    <View style={styles.container}>
      <BorderlessButton onPress={navigation.goBack}>
        <Feather name="arrow-left" size={24} color="#15b6d6" />
      </BorderlessButton>

      <Text style={styles.title}>{title}</Text>

      {showCancel ? (
        <BorderlessButton onPress={handleGoBackToAppHomePage}>
          <Feather name="x" size={24} color="#ff669d" />
        </BorderlessButton>
      ) : (
        <View />
      )}
    </View>
  );
}
Example #6
Source File: index.tsx    From rocketseat-gostack-11-desafios with MIT License 6 votes vote down vote up
App: React.FC = () => (
  <View style={{ flex: 1 }}>
    <StatusBar
      barStyle="light-content"
      backgroundColor="transparent"
      translucent
    />
    <Routes />
  </View>
)
Example #7
Source File: FlutterwaveCheckout.tsx    From flutterwave-react-native with MIT License 6 votes vote down vote up
FlutterwaveCheckoutBackdrop: React.FC<
  FlutterwaveCheckoutBackdropProps
> = function FlutterwaveCheckoutBackdrop({
  animation,
  onPress
}) {
  // Interpolation backdrop animation
  const backgroundColor = animation.interpolate({
    inputRange: [0, 0.3, 1],
    outputRange: [colors.transparent, colors.transparent, 'rgba(0,0,0,0.5)'],
  });
  return (
    <TouchableWithoutFeedback testID='flw-checkout-backdrop' onPress={onPress}>
      <Animated.View style={Object.assign({}, styles.backdrop, {backgroundColor})} />
    </TouchableWithoutFeedback>
  );
}
Example #8
Source File: ProfilePage.tsx    From GiveNGo with MIT License 6 votes vote down vote up
Header = (props: any) => {
  const store = useSelector((state: any) => state.main)

  return (
  <View {...props}>
    <StarColor/>
    <Text category='h6'>{store.anonymous}</Text>
    <Text category='s1'>{`${store.karma} karma points`}</Text>
  </View>
  )
}
Example #9
Source File: FadeExample.tsx    From frontatish with MIT License 6 votes vote down vote up
FadeExample = () => {
  const [visible, setVisible] = useState(false);
  const Colors = useColors();
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: Colors.white }}>
      <View style={{ marginTop: 40, flex: 1 }}>
        <Text
          style={{ padding: 20, color: Colors.font_1 }}
          onPress={() => setVisible(!visible)}
        >
          {visible ? 'Hide' : 'Show'}
        </Text>
        <Fade visible={visible} containerStyle={{ flex: 1 }}>
          <View
            style={{
              backgroundColor: Colors.font_4,
              flex: 1,
              margin: 20,
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <Text style={{ color: Colors.font_1 }}>Fade component</Text>
          </View>
        </Fade>
      </View>
    </SafeAreaView>
  );
}
Example #10
Source File: PrimaryButton.tsx    From jmix-frontend with Apache License 2.0 6 votes vote down vote up
PrimaryButton: FunctionComponent<PrimaryButtonProps> = ({ onPress, loading, style, disabled, children }) => {
  return (
    <View style={style}>
      <TouchableOpacity style={[
                          styles.button,
                          disabled && {opacity: 0.5}
                        ]}
                        onPress={onPress}
                        disabled={disabled}
      >
        {loading ? (
          <ActivityIndicator color={colors.textInverted}/>
        ) : (
          <Text style={styles.text}>{children}</Text>
        )}
      </TouchableOpacity>
    </View>
  );
}
Example #11
Source File: App.tsx    From companion-kit with MIT License 6 votes vote down vote up
render() {
        if (!this.props.skipLoadingScreen && (!this.state.isLoadingComplete)) {
            return (
                <AppLoading
                    startAsync={this._loadStuffAsync}
                    onError={this._handleLoadingError}
                    onFinish={this._handleFinishLoading}
                />
            );
        }

        return (
            <MobxProvider>
                <View style={styles.container}>
                    <StatusBar barStyle="light-content" hidden={true} />
                    <AppRouter />
                </View>
            </MobxProvider>
        );
    }
Example #12
Source File: DetailScreen.tsx    From react-native-sdk with MIT License 6 votes vote down vote up
render() {
    const coffee = this.props.route.params.coffee
    return (
      <View style={styles.container}>
        <Image resizeMode="contain" style={styles.image} source={coffee.icon} />
        <Text style={styles.text}>{coffee.name}. {coffee.subtitle}</Text>
        <Button buttonStyle={styles.button} titleStyle={styles.buttonText} title="Buy Now" onPress={this.buyTapped} />
      </View>
    )
  }
Example #13
Source File: App.tsx    From hamagen-react-native with MIT License 6 votes vote down vote up
App = () => {
  const navigationRef = useRef<any>(null);

  useEffect(() => {
    StatusBar.setBarStyle('dark-content');

    Linking.addEventListener('url', (data) => {
      navigationRef.current && onOpenedFromDeepLink(data.url, navigationRef.current);
    });
  }, []);

  return (
    <View style={styles.container}>
      <Provider store={storeFactory()}>
        <NavigationContainer ref={navigationRef}>
          <Loading navigation={navigationRef.current} />
        </NavigationContainer>
      </Provider>
    </View>
  );
}
Example #14
Source File: index.tsx    From react-native-gifted-charts with MIT License 5 votes vote down vote up
PieChart = (props: propTypes) => {
  const radius = props.radius || 120;
  const extraRadiusForFocused = props.extraRadiusForFocused || radius / 10;
  const pi = props.semiCircle ? Math.PI / 2 : Math.PI;
  const [selectedIndex, setSelectedIndex] = useState(-1);
  let startAngle = props.initialAngle || (props.semiCircle ? -pi : 0);
  let total = 0;
  props.data.forEach(item => {
    total += item.value;
  });
  if (selectedIndex !== 0) {
    let start = 0;
    for (let i = 0; i < selectedIndex; i++) {
      start += props.data[i].value;
    }
    startAngle += (2 * pi * start) / total;
  }
  return (
    <View
      style={{
        height: (radius + extraRadiusForFocused) * 2,
        width: (radius + extraRadiusForFocused) * 2,
      }}>
      {!(
        props.data.length <= 1 ||
        !props.focusOnPress ||
        selectedIndex === -1
      ) && (
        <View
          style={{
            position: 'absolute',
            top: -extraRadiusForFocused,
            left: -extraRadiusForFocused,
          }}>
          <PieChartMain
            {...props}
            data={[
              {
                value: props.data[selectedIndex].value,
                color:
                  props.data[selectedIndex].color || colors[selectedIndex % 9],
                strokeColor: props.data[selectedIndex].strokeColor || null,
                strokeWidth: props.data[selectedIndex].strokeWidth || null,
                gradientCenterColor:
                  props.data[selectedIndex].gradientCenterColor || null,
              },
              {
                value: total - props.data[selectedIndex].value,
                peripheral: true,
                strokeWidth: 0,
              },
            ]}
            radius={radius + extraRadiusForFocused}
            initialAngle={startAngle}
            showText={false}
            innerRadius={props.innerRadius || radius / 2.5}
          />
        </View>
      )}
      <View style={{position: 'absolute'}}>
        <PieChartMain
          {...props}
          selectedIndex={selectedIndex}
          setSelectedIndex={setSelectedIndex}
        />
      </View>
    </View>
  );
}
Example #15
Source File: BtnTemplate.tsx    From ReactNative-UIKit with MIT License 5 votes vote down vote up
BtnTemplate: React.FC<BtnTemplateInterface> = (props) => {
  const {disabled = false} = props;
  const {styleProps} = useContext(PropsContext);
  const {BtnTemplateStyles, theme, iconSize, customIcon} = styleProps || {};

  const imageRef = React.useRef(null);

  // This fixes the tint issue in safari browser
  useImageDelay(imageRef, 10, '', props?.color || '');

  return (
    <TouchableOpacity
      style={styleProps?.BtnTemplateContainer}
      disabled={disabled}
      onPress={props.onPress}>
      <View
        style={[
          {...styles.controlBtn, ...(BtnTemplateStyles as object)},
          props.style as object,
        ]}>
        <Image
          ref={Platform.OS === 'web' ? imageRef : undefined}
          style={{
            width: iconSize || 25,
            height: iconSize || 25,
            opacity: disabled ? 0.4 : 1,
            tintColor: disabled ? 'grey' : props.color || theme || '#fff',
          }}
          resizeMode={'contain'}
          source={{
            uri: props.name
              ? customIcon?.[props.name]
                ? customIcon[props.name]
                : icons[props.name]
              : props.icon,
          }}
        />
      </View>
      <Text
        style={{
          textAlign: 'center',
          marginTop: 5,
          color: disabled ? 'grey' : props.color || theme || '#fff',
          opacity: disabled ? 0.4 : 1,
        }}>
        {props.btnText}
      </Text>
    </TouchableOpacity>
  );
}
Example #16
Source File: App.tsx    From react-native-detector with MIT License 5 votes vote down vote up
export default function App() {
  const [screenshotCounter, setScreenshotCounter] = React.useState<number>(0);

  React.useEffect(() => {
    const requestPermission = async () => {
      try {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
          {
            title: 'Get Read External Storage Access',
            message:
              'get read external storage access for detecting screenshots',
            buttonNeutral: 'Ask Me Later',
            buttonNegative: 'Cancel',
            buttonPositive: 'OK',
          }
        );
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          console.log('You can use the READ_EXTERNAL_STORAGE');
        } else {
          console.log('READ_EXTERNAL_STORAGE permission denied');
        }
      } catch (err) {
        console.warn(err);
      }
    };
    if (Platform.OS === 'android') {
      requestPermission();
    }
    const userDidScreenshot = () => {
      setScreenshotCounter((screenshotCounter) => screenshotCounter + 1);
    };
    const unsubscribe = addScreenshotListener(userDidScreenshot);
    return () => {
      unsubscribe();
    };
  }, []);

  return (
    <View style={styles.container}>
      <Text>User took {screenshotCounter} screenshot</Text>
    </View>
  );
}
Example #17
Source File: FakeCurrencyInput.tsx    From react-native-currency-input with MIT License 5 votes vote down vote up
FakeCurrencyInput = React.forwardRef<TextInput, FakeCurrencyInputProps>(
  (props, ref) => {
    const {
      value,
      style,
      onChangeText,
      containerStyle,
      caretHidden,
      caretColor,
      selectionColor,
      onFocus,
      onBlur,
      ...rest
    } = props;

    const [focused, setFocused] = React.useState(false);
    const [formattedValue, setFormattedValue] = React.useState('');

    return (
      <View style={[containerStyle, styles.inputContainer]}>
        <TextWithCursor
          style={style}
          cursorVisible={focused && !caretHidden}
          cursorProps={{ style: { color: caretColor || selectionColor } }}
        >
          {formattedValue}
        </TextWithCursor>
        <CurrencyInput
          value={value}
          onChangeText={(text) => {
            setFormattedValue(text);
            onChangeText && onChangeText(text);
          }}
          {...rest}
          selectionColor="transparent"
          caretHidden
          onFocus={(e) => {
            setFocused(true);
            onFocus && onFocus(e);
          }}
          onBlur={(e) => {
            setFocused(false);
            onBlur && onBlur(e);
          }}
          style={styles.inputHidden}
          ref={ref}
        />
      </View>
    );
  }
)
Example #18
Source File: Tutorial.tsx    From mobile with Apache License 2.0 5 votes vote down vote up
TutorialScreen = () => {
  const navigation = useNavigation();
  const {width: viewportWidth} = useWindowDimensions();
  const carouselRef = useRef(null);
  const [currentStep, setCurrentStep] = useState(0);
  const [i18n] = useI18n();
  const close = useCallback(() => navigation.goBack(), [navigation]);

  const isStart = currentStep === 0;
  const isEnd = currentStep === tutorialData.length - 1;

  const renderItem = useCallback<CarouselProps<TutorialKey>['renderItem']>(
    ({item, index}) => {
      return (
        <View style={styles.flex} accessibilityElementsHidden={index !== currentStep}>
          <TutorialContent item={item} isActive={tutorialData[currentStep] === item} />
        </View>
      );
    },
    [currentStep],
  );

  const nextItem = useCallback(() => {
    if (carouselRef.current) {
      if (isEnd) {
        close();
        return;
      }
      (carouselRef.current! as CarouselStatic<TutorialKey>).snapToNext();
    }
  }, [close, isEnd]);

  const prevItem = useCallback(() => {
    if (carouselRef.current) {
      (carouselRef.current! as CarouselStatic<TutorialKey>).snapToPrev();
    }
  }, []);

  return (
    <Box backgroundColor="overlayBackground" flex={1}>
      <SafeAreaView style={styles.flex}>
        <Toolbar
          title=""
          navIcon="icon-back-arrow"
          navText={i18n.translate('Tutorial.Close')}
          navLabel={i18n.translate('Tutorial.Close')}
          onIconClicked={close}
        />
        <Carousel
          ref={carouselRef}
          data={tutorialData}
          renderItem={renderItem}
          sliderWidth={viewportWidth}
          itemWidth={viewportWidth}
          onSnapToItem={newIndex => setCurrentStep(newIndex)}
          importantForAccessibility="no"
          accessible={false}
        />
        <Box flexDirection="row" padding="l">
          <Box flex={1}>
            {!isStart && (
              <Button text={i18n.translate(`Tutorial.ActionBack`)} variant="subduedText" onPress={prevItem} />
            )}
          </Box>
          <Box flex={1} justifyContent="center">
            <ProgressCircles numberOfSteps={tutorialData.length} activeStep={currentStep + 1} marginBottom="none" />
          </Box>
          <Box flex={1}>
            <Button
              text={i18n.translate(`Tutorial.Action${isEnd ? 'End' : 'Next'}`)}
              variant="text"
              onPress={nextItem}
            />
          </Box>
        </Box>
      </SafeAreaView>
    </Box>
  );
}
Example #19
Source File: App.tsx    From react-native-masonry-scrollview with MIT License 5 votes vote down vote up
AnimatableView = createAnimatableComponent(View)
Example #20
Source File: index.tsx    From NLW-1.0 with MIT License 5 votes vote down vote up
Detail: React.FC = () => {
  const [data, setData] = useState<Data>({} as Data);
  const navigation = useNavigation();
  const route = useRoute();

  const routeParams = route.params as Params;

  useEffect(() => {
    async function loadPoint() {
      const response = await api.get(`/points/${routeParams.point_id}`);

      setData(response.data);
    }

    loadPoint();
  }, []);

  function handleNavigateBack() {
    navigation.goBack();
  }

  function handleComposeMail() {
    MailComposer.composeAsync({
      subject: "Interesse na coleta de resíduos",
      recipients: [data.point.email],
    });
  }

  function handleWhatsApp() {
    Linking.openURL(
      `whatsapp://send?phone=${data.point.whatsapp}&text=Tenho interesse na coleta de resíduos`
    );
  }
  if (!data.point) {
    return null;
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}>
        <TouchableOpacity onPress={handleNavigateBack}>
          <Icon name="arrow-left" size={20} color="#34cb79" />
        </TouchableOpacity>

        <Image
          style={styles.pointImage}
          source={{
            uri: data.point.image_url,
          }}
        />

        <Text style={styles.pointName}>{data.point.name}</Text>
        <Text style={styles.pointItems}>
          {data.items.map((item) => item.title).join(",")}
        </Text>

        <View style={styles.address}>
          <Text style={styles.addressTitle}>Endereço</Text>
          <Text style={styles.addressContent}>
            {data.point.city}, {data.point.uf}
          </Text>
        </View>
      </View>
      <View style={styles.footer}>
        <RectButton style={styles.button} onPress={() => handleWhatsApp()}>
          <FontAwesome name="whatsapp" size={20} color="#fff" />
          <Text style={styles.buttonText}>Whatsapp</Text>
        </RectButton>
        <RectButton style={styles.button} onPress={() => handleComposeMail()}>
          <Icon name="mail" size={20} color="#fff" />
          <Text style={styles.buttonText}>E-mail</Text>
        </RectButton>
      </View>
    </SafeAreaView>
  );
}
Example #21
Source File: SelectMapPosition.tsx    From happy with MIT License 5 votes vote down vote up
export default function SelectMapPosition() {
  const navigation = useNavigation();
  const [position, setPosition] = useState({ latitude: 0, longitude: 0});

  function handleNextStep() {
    navigation.navigate('OrphanageData', { position });
  }

  function handleSelectMapPosition(event: MapEvent) {
    setPosition(event.nativeEvent.coordinate);
  }

  return (
    <View style={styles.container}>
      <MapView
        initialRegion={{
          latitude: -27.2092052,
          longitude: -49.6401092,
          latitudeDelta: 0.008,
          longitudeDelta: 0.008,
        }}
        style={styles.mapStyle}
        onPress={handleSelectMapPosition}
      >
        {position.latitude !== 0 && (
          <Marker
            icon={mapMarkerImg}
            coordinate={{ latitude: position.latitude, longitude: position.longitude }}
          />
        )}
      </MapView>

      {position.latitude !== 0 && (
        <RectButton style={styles.nextButton} onPress={handleNextStep}>
          <Text style={styles.nextButtonText}>Próximo</Text>
        </RectButton>
      )}
    </View>
  )
}
Example #22
Source File: cart.spec.tsx    From rocketseat-gostack-11-desafios with MIT License 5 votes vote down vote up
TestComponent: React.FC = () => {
  const { products, addToCart, increment, decrement } = useCart();

  function handleAddToCart(): void {
    addToCart({
      id: '1234',
      title: 'Test product',
      image_url: 'test',
      price: 1000,
      quantity: 0,
    });
  }

  function handleIncrement(): void {
    increment('1234');
  }

  function handleDecrement(): void {
    decrement('1234');
  }

  return (
    <>
      <TouchableOpacity testID="add-to-cart" onPress={handleAddToCart}>
        Add to cart
      </TouchableOpacity>

      <TouchableOpacity testID="increment" onPress={handleIncrement}>
        Increment
      </TouchableOpacity>

      <TouchableOpacity testID="decrement" onPress={handleDecrement}>
        Decrement
      </TouchableOpacity>

      {products.map(product => (
        <View key={product.id}>
          <Text>{product.title}</Text>
          <Text>{product.quantity}</Text>
        </View>
      ))}
    </>
  );
}
Example #23
Source File: FlutterwaveButton.tsx    From flutterwave-react-native with MIT License 5 votes vote down vote up
FlutterwaveButton: React.FC<
  FlutterwaveButtonProps
> = function FlutterwaveButton({
  style,
  alignLeft,
  children,
  disabled,
  onPress
}) {
  // render primary button
  return (
    <TouchableHighlight
      underlayColor={colors.primaryLight}
      disabled={disabled}
      onPress={onPress}
      style={[
        styles.button,
        disabled ? styles.buttonBusy : {},
        alignLeft ? styles.buttonAlignLeft : {},
        style
      ]}
      activeOpacity={1}
      testID='flw-button'>
        <>
          {children ? children : (
            <Image
              source={pryContent}
              resizeMode="contain"
              resizeMethod="resize"
              style={styles.buttonContent}
              fadeDuration={0}
            />
          )}
          {disabled
            ? (<View style={styles.buttonBusyOvelay} />)
            : null}
        </>
    </TouchableHighlight>
  );
}
Example #24
Source File: ChatPage.tsx    From GiveNGo with MIT License 5 votes vote down vote up
export default function ChatPage({ navigation }: any) {
  const renderItemAccessory = () => (
    <Button size="tiny" status="primary">
      View
    </Button>
  );

  const RightActions = () => {
    return (
      <View
        style={{ flex: 1, backgroundColor: 'red', justifyContent: 'center' }}
      >
        <Text
          style={{
            color: 'white',
            paddingHorizontal: 300,
            fontWeight: '600',
          }}
        >
          Delete?
        </Text>
      </View>
    );
  };

  const renderItem = ({ item, index }: any) => (
    <Swipeable renderRightActions={RightActions}>
      <ListItem
        style={styles.items}
        description={`${item.task}`}
        accessoryLeft={ProfileIcon}
        accessoryRight={renderItemAccessory}
        onPress={() => navigation.navigate('Chat Feed')}
      />
    </Swipeable>
  );

  return (
    <React.Fragment>
      <Layout
        style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
        level="3"
      >
        <View>
          <Text style={styles.title} category="h2">
            Messages
          </Text>
        </View>
        <Divider />
        <FlatList
          style={styles.container}
          data={flatListData}
          renderItem={renderItem}
          keyExtractor={(item, index) => index.toString()}
          showsHorizontalScrollIndicator={false}
        />
      </Layout>
    </React.Fragment>
  );
}
Example #25
Source File: ButtonExample.tsx    From frontatish with MIT License 5 votes vote down vote up
ButtonExample = () => {
  const Colors = useColors();
  const [loading, setLoading] = useState(false);
  const handlePress = () => {
    // do some action
    setLoading(!loading);
  };
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: Colors.white }}>
      <View style={styles.exampleBtnContainer}>
        <Text style={{ color: Colors.font_1, fontSize: Fonts.size.h3 }}>
          Button Examples
        </Text>
        <View style={{ flexDirection: 'row', marginVertical: 20 }}>
          <Button
            type="primary"
            onPress={handlePress}
            label="Primary Button"
            customStyles={{ flex: 1, marginRight: 20 }}
          />
          <Button
            type="secondary"
            onPress={handlePress}
            label="Secondary Button"
            customStyles={{ flex: 1 }}
          />
        </View>
        <View style={{ flexDirection: 'row', marginVertical: 20 }}>
          <Button
            type="primary"
            onPress={handlePress}
            label="Primary Disabled"
            customStyles={{ flex: 1, marginRight: 20 }}
            disabled
          />
          <Button
            type="secondary"
            onPress={handlePress}
            label="Secondary Disabled"
            disabled
            customStyles={{ flex: 1 }}
          />
        </View>
        <View style={{ marginVertical: 20 }}>
          <Button
            type="primary"
            onPress={handlePress}
            label="Loading Button"
            loading={loading}
          />
        </View>
      </View>
    </SafeAreaView>
  );
}