LCRN EP9 – Digital Wallet App – React Native UI

In this episode of “Let’s Code React Native” series, we are going to build a clean looking Digital Wallet app based on the design created by Happy Tri Milliarta on Dribbble.

Snippets

navigation > tabs.js

<Svg
    width={75}
    height={61}
    viewBox="0 0 75 61"
>
    <Path
        d="M75.2 0v61H0V0c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1h-.1z"
        fill={COLORS.white}
    />
</Svg>

screens > Home.js (Dummy Data)

const featuresData = [
    {
        id: 1,
        icon: icons.reload,
        color: COLORS.purple,
        backgroundColor: COLORS.lightpurple,
        description: "Top Up"
    },
    {
        id: 2,
        icon: icons.send,
        color: COLORS.yellow,
        backgroundColor: COLORS.lightyellow,
        description: "Transfer"
    },
    {
        id: 3,
        icon: icons.internet,
        color: COLORS.primary,
        backgroundColor: COLORS.lightGreen,
        description: "Internet"
    },
    {
        id: 4,
        icon: icons.wallet,
        color: COLORS.red,
        backgroundColor: COLORS.lightRed,
        description: "Wallet"
    },
    {
        id: 5,
        icon: icons.bill,
        color: COLORS.yellow,
        backgroundColor: COLORS.lightyellow,
        description: "Bill"
    },
    {
        id: 6,
        icon: icons.game,
        color: COLORS.primary,
        backgroundColor: COLORS.lightGreen,
        description: "Games"
    },
    {
        id: 7,
        icon: icons.phone,
        color: COLORS.red,
        backgroundColor: COLORS.lightRed,
        description: "Mobile Prepaid"
    },
    {
        id: 8,
        icon: icons.more,
        color: COLORS.purple,
        backgroundColor: COLORS.lightpurple,
        description: "More"
    },
]

const specialPromoData = [
    {
        id: 1,
        img: images.promoBanner,
        title: "Bonus Cashback1",
        description: "Don't miss it. Grab it now!"
    },
    {
        id: 2,
        img: images.promoBanner,
        title: "Bonus Cashback2",
        description: "Don't miss it. Grab it now!"
    },
    {
        id: 3,
        img: images.promoBanner,
        title: "Bonus Cashback3",
        description: "Don't miss it. Grab it now!"
    },
    {
        id: 4,
        img: images.promoBanner,
        title: "Bonus Cashback4",
        description: "Don't miss it. Grab it now!"
    },
]

Plugins

npm install @react-navigation/native react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/stack @react-navigation/bottom-tabs

npm install react-native-linear-gradient --save

npm install react-native-svg

npm i react-native-iphone-x-helper --save

npm install react-native-camera --save

Useful Links

Source Code