hoaphantn7604/react-native-template-components

React Native Template Typescript

React Native Template Components

Building a mobile application from scratch can be a time-consuming process and it's not always necessary to start from scratch. Using a pre-built React Native template can save time and effort while also providing a solid foundation for your project.

Video demo

Requirements

Node 12 or greater is required. Development for iOS requires a Mac and Xcode 10 or up, and will target iOS 11 and up.

You also need to install the dependencies required by React Native.
Go to the React Native environment setup, then select React Native CLI Quickstart tab.
Follow instructions for your given development OS and target OS.

Quick start

To create a new project using the boilerplate simply run :

npx react-native init MyApp --template react-native-template-components

Assuming you have all the requirements installed, you can run the project by running:

• yarn start to start the metro bundler, in a dedicated terminal
• yarn <platform> to run the platform application (remember to start a simulator or connect a device)

react-native-template-components's Issues

Text vanishes when using flexDirection: "row"

I want to place 2 drop downs side-by-side like this:

function DropDowns() {
    const data = [
        { label: 'Apple', value: 'apple' },
        { label: 'Banana', value: 'banana' }
    ];

    return (
        <View style={{flexDirection: "row"}}>
            <Dropdown
                labelField="label"
                valueField="value"
                data={data}
                onChange={() => { }}
            />
            <Dropdown
                labelField="label"
                valueField="value"
                data={data}
                onChange={() => { }}
            />
        </View>
    );
}

However, when placing inside the view with flexDirection: "row", the text all disappears.
Comment out that one line and it looks fine.
Is there a simple fix for this?