Preventing non-numeric values using Regular Expression in React Native

Sometimes we don't want any non-numeric value to be entered into our App. This can be prevented to some extent by using the Keyboard Type props of the Text Input component, but if the user copy-pastes some non-numeric values, there is nothing much we can do about it. However, using regular expressions can help prevent this error.

Here's how to use the regular expression concept in react native : 

Source code to speed things up -

import React, { useState } from "react";

import { StatusBar } from "expo-status-bar";

import { StyleSheet, Text, View, TextInput } from "react-native";

export default function App() {

const [enteredValue, setEnteredValue] = useState("");

const checkEnteredValue = (inputValue) => {

setEnteredValue(inputValue.replace(/[^0-9]/g, ""));

};

return (

<View style={styles.container}>

<View style={{ justifyContent: "center", alignItems: "center" }}>

<TextInput

style={styles.inputBox}

placeholder="enter value"

keyboardType="phone-pad"

onChangeText={checkEnteredValue()}

value={enteredValue}

></TextInput>

</View>

<StatusBar style="auto" />

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: "#fff",

alignItems: "center",

justifyContent: "center",

},

inputBox: {

width: "80%",

height: 50,

borderWidth: 5,

borderColor: "rgba(230, 191, 131,0.7)",

marginTop: 100,

fontSize: 25,

},

});

MixTape Music App

MixTape Music App using React Native

Has it ever happened with you that the birthday of someone very close to you is just in a few days and somehow you have no idea what to gift them, yet again?

Of course it has to be something special, something personalised that says you know their likes/dislikes, but all the youtube videos about gift ideas that you spent hours watching has led you no where.

Well, I might have a solution to your woe! Why not make them a MixTape App? MixTapes never go out of style, and well if it saved Chandler's a** from getting kicked by Monica, the idea must be special, won't you agree? 

If you gift them a MixTape app, it's guaranteed that they feel special but more importantly will prove how smart you are. Well making an App is no joke, but if you follow along my tutorial, it will be a breeze I promise, even if you have no coding experience!

For whom did you make the Mixtape for Saisha? You might be wondering..well I made it for the most important person in my life, ME. #selfLove :D

Step 1: Setup react native in your laptop or desktop if you have not already , here's how : 

Step 2 (optional) : If you are using the mac operating system, you can install a simulator as well. Otherwise your physical phone is always an option for checking the output.

Step 3 : Here is the full walk through tutorial -

Step 4 : Here is the source code for speeding things up -

import { StatusBar } from "expo-status-bar";

import {

 StyleSheet,

 Text,

 View,

 ImageBackground,

 Image,

 TouchableOpacity,

 ScrollView,

} from "react-native";

 

import { Audio } from "expo-av";

 

export default function App() {

 playSound = async (url) => {

   await Audio.setIsEnabledAsync(true);

   await Audio.Sound.createAsync({ uri: url }, { shouldPlay: true });

 };

 

 return (

   <View style={styles.container}>

     <ImageBackground

       source={require("./assets/MixTape.jpeg")}

       resizeMode="cover"

       style={{ flex: 1 }}

     >

       <View style={{ flex: 0.2 }}>

         <Image

           source={require("./assets/Music.png")}

           style={{ marginTop: -100 }}

         />

 

         <Text style={styles.textDesign}>MixTape for Saisha</Text>

       </View>

 

       <ScrollView style={{ flex: 0.6 }}>

         <TouchableOpacity

           style={[

             styles.buttonDesign,

             {

               marginTop: 15,

             },

           ]}

           onPress={() => {

             var url =

               "https://cdn.glitch.global/88a45ff5-855c-4337-9c23-a7d2475ba747/06%20Moh%20Moh%20Ke%20Dhaage%20(Female)%20-%20Monali%20Thakur%20-%20320Kbps.mp3?v=1647317300480";

             playSound(url);

           }}

         >

           <Image source={require("./assets/button.png")} />

 

           <Text style={styles.buttonText}>Moh Moh ke</Text>

         </TouchableOpacity>

 

         <TouchableOpacity

           style={styles.buttonDesign}

           onPress={() => {

             var url =

               "https://cdn.glitch.global/88a45ff5-855c-4337-9c23-a7d2475ba747/01.%20Saibo.mp3?v=1647317900340";

             playSound(url);

           }}

         >

           <Image source={require("./assets/button.png")} />

 

           <Text style={styles.buttonText}>Saibo</Text>

         </TouchableOpacity>

 

         <TouchableOpacity

           style={styles.buttonDesign}

           onPress={() => {

             var url =

               "https://cdn.glitch.global/88a45ff5-855c-4337-9c23-a7d2475ba747/godGaveMeU.mp3?v=1647318928874";

             playSound(url);

           }}

         >

           <Image source={require("./assets/button.png")} />

 

           <Text style={styles.buttonText}>God gave me U</Text>

         </TouchableOpacity>

 

         <TouchableOpacity

           style={styles.buttonDesign}

           onPress={() => {

             var url =

               "https://cdn.glitch.global/88a45ff5-855c-4337-9c23-a7d2475ba747/BeginAgain.mp3?v=1647318973200";

             playSound(url);

           }}

         >

           <Image source={require("./assets/button.png")} />

 

           <Text style={styles.buttonText}>Begin Again</Text>

         </TouchableOpacity>

 

         <TouchableOpacity

           style={styles.buttonDesign}

           onPress={() => {

             var url =

               "https://cdn.glitch.global/88a45ff5-855c-4337-9c23-a7d2475ba747/Enchanted.mp3?v=1647318996409";

             playSound(url);

           }}

         >

           <Image source={require("./assets/button.png")} />

 

           <Text style={styles.buttonText}>Enchanted</Text>

         </TouchableOpacity>

 

         <TouchableOpacity

           style={styles.buttonDesign}

           onPress={() => {

             var url =

               "https://cdn.glitch.global/88a45ff5-855c-4337-9c23-a7d2475ba747/when%20you%20say%20nothing%20at%20all.mp3?v=1647319002430";

             playSound(url);

           }}

         >

           <Image source={require("./assets/button.png")} />

 

           <Text style={styles.buttonText}>When you Say</Text>

         </TouchableOpacity>

 

         <TouchableOpacity

           style={styles.buttonDesign}

           onPress={() => {

             var url =

               "https://cdn.glitch.global/88a45ff5-855c-4337-9c23-a7d2475ba747/04.%20Bikhri%20Bikhri.mp3?v=1647319034872";

             playSound(url);

           }}

         >

           <Image source={require("./assets/button.png")} />

 

           <Text style={styles.buttonText}>Bikhri Bikhri</Text>

         </TouchableOpacity>

 

         <TouchableOpacity

           style={styles.buttonDesign}

           onPress={() => {

             var url =

               "https://cdn.glitch.global/88a45ff5-855c-4337-9c23-a7d2475ba747/BeautifulTimes.mp3?v=1647319044331";

             playSound(url);

           }}

         >

           <Image source={require("./assets/button.png")} />

 

           <Text style={styles.buttonText}>Beautiful times</Text>

         </TouchableOpacity>

 

         <TouchableOpacity

           style={styles.buttonDesign}

           onPress={() => {

             var url =

               "https://cdn.glitch.global/88a45ff5-855c-4337-9c23-a7d2475ba747/VanillaTwilight.mp3?v=1647319045674";

             playSound(url);

           }}

         >

           <Image source={require("./assets/button.png")} />

 

           <Text style={styles.buttonText}>Vannila Twilight</Text>

         </TouchableOpacity>

 

         <TouchableOpacity

           style={styles.buttonDesign}

           onPress={() => {

             var url =

               "https://cdn.glitch.global/88a45ff5-855c-4337-9c23-a7d2475ba747/07.%20Bin%20Tere%20Kiya%20Hai%20Jeena%20-%20Jawad%20Ahmed.mp3?v=1647319073325";

             playSound(url);

           }}

         >

           <Image source={require("./assets/button.png")} />

 

           <Text style={styles.buttonText}>Bin tere</Text>

         </TouchableOpacity>

 

         <TouchableOpacity

           style={[styles.buttonDesign, { paddingBottom: 50 }]}

           onPress={() => {

             var url =

               "https://cdn.glitch.global/88a45ff5-855c-4337-9c23-a7d2475ba747/dbz10.mp3?v=1647323509040";

             playSound(url);

           }}

         >

           <Image source={require("./assets/button.png")} />

 

           <Text style={styles.buttonText}>Dragon Ball z</Text>

         </TouchableOpacity>

       </ScrollView>

 

       <View style={{ flex: 0.2 }}>

         <TouchableOpacity

           style={[styles.buttonDesign, { marginTop: -20 }]}

           onPress={() => {

             Audio.setIsEnabledAsync(false);

           }}

         >

           <Image source={require("./assets/stopButton.png")} />

 

           <Text style={styles.buttonText}>Stop Song</Text>

         </TouchableOpacity>

       </View>

     </ImageBackground>

 

     <StatusBar style="auto" />

   </View>

 );

}

 

const styles = StyleSheet.create({

 container: {

   flex: 1,

   backgroundColor: "#fff",

 },

 

 textDesign: {

   color: "white",

   backgroundColor: "#81d8d0",

   borderWidth: 5,

   borderColor: "white",

   borderRadius: 30,

   fontSize: 35,

   overflow: "hidden",

   textAlign: "center",

   width: "75%",

   height: 60,

   fontFamily: "Papyrus",

   marginTop: -120,

   alignSelf: "center",

 },

 

 buttonDesign: {

   justifyContent: "center",

   alignItems: "center",

   alignSelf: "center",

   width: 200,

   marginTop: 50,

 },

 buttonText: {

   color: "white",

   fontSize: 28,

   textAlign: "center",

   fontFamily: "Papyrus",

   marginTop: -90,

 },

});