Geek Culture
Published in

Geek Culture

To React Native: Deploy Once, Ship Infinitely

React Native is a framework for building Native, iOS, and Android applications in React. As many of the application based languages, React Native takes a mobile spin on views, and expands the DOM into a mobile state.

Expo is a framework for establishing React Native applications, launching, testing, and bundling them to ship across networks for users. As early as I could remember Expo has been a leading solution for showcasing development features with quickly hosted and viewable QR established environments.

React Native Objectives & Patterns

Simply, the goal in mind, was to migrate a working React X Next web application into a mobile environment, using React Native and Expo. The exchange from web based objects into mobile based objects is the simplest variance.

Where Div becomes View, SafeAreaView a container, the orchestration of these elements combined creates a very familiar pattern to responsive focused development. The reference was an React application from a previous article, expanding the reach of this solution into new means was the ideas at hand.

Solving Challenges in React Native

Past the initial architecture of the application, without UI libraries to support quick iteration and styling, the functionality of the React Native application becomes the challenge at hand.

Expanding with React hooks, effects, events, and functions — building all of the core features requires correlation of the React Native components through state, libraries, and custom solutions.

The most drastic difference in this case-study is the exchange of HTML based inputs & defaults for React Native “TextInput” components. Where DOM based inputs have set types for fomatting, React Native has set keyboards for input kind/s.

Initially this was a challenge, the fluidity of the form inputs and the lack of DOM for processing jQuery meant re-writing the entire application to be state based. In the idea of MVP and simplicity this was not previously developed & created a new path for how the application inputs themselves handled the inputs.

User Native Input for Time Value Format

Formatted inputs becomes an interesting focus when it is core to the solution for the input itself to be set specifically. As mentioned, <input type=”time”> is something that comes in quite hand for web, though without it, the functionality changes.

At first the mind goes to replicating the solution at hand with alternative solutions to emulate the experience and simplify the structure. There are a few libraries that implement time based inputs that work similarly, though lose functionality without React web views.

Additionally, there are solutions that extend the input in a time format, though use scroll and date picker type functionality that is more or less arduous when inputting multiple time variables, in a repetitive cycle for a result.

Event Driven Procedures with React Native

What became useful, upon reaching this point — were the event driven handlers that are outlined in the React Native documentation. Documentation is useful for navigating the fundamental, up to orchestrating the obscure, here is a prime example.

<Button
title="Left button"
onPress={() => Alert.alert('Left button pressed')}
/>

In the onPress event you can process custom functions built as handlers, in this sense, calculating the state of two inputs as a sum. From there the logic follows similarly to the existing React application, though uses state and a simple logarithm to output the sum.

<TextInput                            
keyboardType="numeric"
onChangeText={(text) => setTime(+text)} />

The <TextInputs>’s onChange of text sets the entry data points in state to store the data for the algorithm, which is then processed by the the onPress event, and reiterated as a stateful text in a <Text> component.

function calculateTotal() { setTimeTotal(((timeThree — timeOne) * 100 + (timeFour — timeTwo)) / 100); }

A custom function processes all of the stored state and sets a new version of state to output this data. As with the initial application, these solutions could be expanded to continuously update a state total in storage or send an API POST request to a database which is stored as the user.

Thanks for Reading, Keep Subscribing!

Looking for more Software Development advice? Follow along on Twitter, GitHub, and LinkedIn — You can get in touch with me directly on Messenger. Visit online for the latest updates, news, and information at collectedview.io.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store