Sizze - Design to Real Code

React Native Code

Copy Code

Copied

import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { useDispatch, useSelector } from 'react-redux';
import AsyncStorage from '@react-native-async-storage/async-storage';
import BottomSheet from '@gorhom/bottom-sheet';
import Constants from 'expo-constants';
import { Button } from '../../../components/button';
import { getUserData } from '../../../services/API/get_user_data';
import { setUserData } from '../../../store/actions/user_data';
import { THEME } from '../../../themes/constants';
import { PrivacyPolicyScreen } from '../ProfileScreen/privacy-policy-screen';

const appName = Constants?.manifest?.name; 
const WelcomeScreen = () => {
  const navigation = useNavigation<any>();
  const dispatch = useDispatch();
  const tokenFromReducer = useSelector(
    (store: any) => store.user_token.user_token
  );
  console.log(appName, 'appName');
  const [indexModal, setIndexModal] = useState(-1);

  const sheetRef = useRef<BottomSheet>();

  const onCloseModal = () => {
    sheetRef.current?.close();
    setIndexModal(-1);
  };

  const handleSnapPressModal = useCallback((index: number) => {
    setIndexModal(index);
    if (sheetRef.current !== null) {
      sheetRef.current.snapToIndex(index);
    }
  }, []);

  useEffect(() => {
    if (tokenFromReducer) {
      getUserData(tokenFromReducer)
        .then((data) => {
          dispatch(setUserData(data.data));
        })
        .catch((error) => {
          console.error(error, 'Catch error from welcome screen getUserData');
        });
    }
  }, [tokenFromReducer]);

  const img = require('../../../../assets/adaptive-icon.png');

  return (
    <>
      <View style={styles.container}>
        <View style={{ flex: 1 }}>
          <View style={{ marginTop: 112 }}>
            <Image
              style={{ width: 88, height: 88, borderRadius: 12 }}
              source={img}
            />
          </View>
          <Text style={styles.title}>Welcome to the {appName}</Text>
        </View>
        <View style={{ alignItems: 'center' }}>
          <Text style={styles.description}>
            By tapping ‘Start’ I agree to{' '}
            <Text
              onPress={() => handleSnapPressModal(1)}
              style={{ color: THEME().link }}
            >
              Privacy policy
            </Text>
          </Text>
          <View style={styles.line} />
          <View style={{ width: '100%', marginBottom: 40 }}>
            <Button
              title="Start"
              onPress={() => {
                AsyncStorage.setItem('showWelcomeScreen', 'false').then((r) =>
                  console.log()
                );
                navigation.navigate('Main');
              }}
            />
          </View>
        </View>
      </View>

      <PrivacyPolicyScreen
        sheetRef={sheetRef}
        onClose={onCloseModal}
        index={indexModal}
      />
    </>
  );
};

export default WelcomeScreen;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    backgroundColor: THEME().backgroundLight,
    paddingHorizontal: 16,
  },
  title: {
    fontSize: 42,
    fontWeight: '700',
    lineHeight: 50,
    marginTop: 16,
    color: THEME().textLight
  },
  line: {
    width: '100%',
    height: 1,
    backgroundColor: THEME().borderLight,
    marginVertical: 12,
  },
  description: {
    color: THEME().textLight,
    fontWeight: '400',
    fontSize: 14,
    lineHeight: 16,
  },
});

From Design to Code in Seconds

Instant transfer from Figma

Here’s how it works

Design transfer from Figma

Actions, Data, Presets. All in one.

Download folder or code

Everyone can focus on what they do best

Enhanced Application Advantages

Brush Future-Sliced Design Methodology. Applying the Future-Sliced Design methodology for a scalable and maintainable application architecture that supports future enhancements and changes.

Archive Expo SDK 47 Compatibility. Utilizing optimized libraries and components compatible with Expo SDK 47 for enhanced application performance and functionality.

Send_To_Mobileeas Build Support. Enabling eas build support for streamlined development, testing, and deployment processes.

Toggle_OffComponent-Based Application Architecture. Building the application using reusable and modular components for improved code reusability and faster development iterations.

ApiSecure API Access and Data Protection. Ensuring secure access to the application API and protecting sensitive data through industry-standard security measures.

Dns Server-Based Media File Storage. Storing media files on a server for efficient management and scalability, reducing the application's storage burden.

Cutting-edge features for advanced analytics

Auto Layout

Components

Constraints

Rapid Prototyping

We are so proud of Sizziers all over the world!

Create real components