DEV Community: REKA

React Navigation v4 BottomTab with a little tweak

syiima — Sun, 27 Feb 2022 08:35:50 +0000

Per the title, we are going to do a nested BottomTab with a little tweak. Instead of the usual Icon for the tabIcon, we will use Image.

Adding Navigation

To start, once you have your react native app initialized, please install React Navigation. Please visit the React Navigation v4 getting started page for the full details on setup. Here is a short walkthrough of the setup.

Install React Navigation v4 and its dependencies as shown below:

yarn add react-navigation@4.2.2

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Once you got your React App and React Navigation ready, let's move on to the next step.

Minimal example of tab-based navigation

For the navigators, we will need to have 2 tabs.

//Tab1.js
import React from 'react';
import { View, Text, Image, Dimensions } from 'react-native';

import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';

import Tab2 from './Tab2'

class Tab1 extends React.Component {
    render() {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Tab1!</Text>
        </View>
      );
    }
}

const BottomTab = createBottomTabNavigator({
    Tab1: {screen: Tab1},
    Tab2 :{screen: Tab2},
},{
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let IconComponent = Ionicons;
        let iconName;
        if (routeName === 'Tab1') {
          iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline';
        } else if (routeName === 'Tab2') {
            iconName = focused ? 'alarm' : 'alarm-outline';
        }

        // You can return any component that you like here!
        return <IconComponent name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: '#26416d',
      inactiveTintColor: 'gray',
    },
  })

export default createAppContainer(BottomTab);

//Tab2.js
import React from 'react';
import { View, Text,Button } from 'react-native';

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class Screen1 extends React.Component {
    render() {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Tab2 Screen1!</Text>
          <Button
            onPress={() => this.props.navigation.navigate('Screen2')}
            title="Go to screen 2"
            color="#f5bebd"
          />
        </View>
      );
    }
}

class Screen2 extends React.Component {
    render() {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Screen2!</Text>
        </View>
      );
    }
}

const StackNavigator = createStackNavigator({
    Screen1: Screen1,
    Screen2: Screen2,
  });

export default createAppContainer(StackNavigator);

Here's an example of bottomtab withIcon

Now, here comes the little tweak. Make sure you have 2 different sets of images. As you can see here, I have pictures for Profile and Settings. You just need to replace the tabBarIcon settings.

defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let IconComponent = Ionicons;
        let iconName;
        if (routeName === 'Tab1') {
          iconName = focused 
          ? require('./profile.png') 
          : require('./profileInactive.png');
        } else if (routeName === 'Tab2') {
            iconName = focused 
            ? require('./settings.png') 
            : require('./settingsInactive.png');
        }

        // You can return any component that you like here!
        return <Image source={iconName} style={{height:30, width:30, }}/>;
      },
    })

And voila! There you go.

As you can see here, when we go to Screen 2, the bottom tab is still there. In order to remove it, we only need to add

tabBarVisible: navigation.state.index === 0

under the defaultNavigationOptions in the bottomNavigator that we've created. And POOF!

You can change the image size, or the label size to your liking. You can even change the bottom tab bar to any colour or shape that you want.

Hope you had fun creating the tab. Bye~

Getting started with NodeJS

Ali Zulfaqar — Thu, 30 Dec 2021 01:08:34 +0000

Hello everyone wish you are well and good. For this post i will be sharing on how to get started with NodeJS backend. This is a really basic step. Lets get started

Getting the idea what is NodeJS

Node.js is a way for web applications to have real-time two-way connections, where both the client and server can initiate communication, allowing them to exchange data freely.

create a folder and run npm init with your CMD

npm init

So what does npm init does is that it will initialize a package.json file

For the next step, we need to create a file that contains code for the web application. For the naming of the file, it is upon your own naming convention. A lot of tutorial is using app.js, or server.js as the name of the file. Below is the code needed just to test whether our web server is running or not

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Next, inside the folder directory use command
node {yourwebserverfilename}
The image is showing that the web application is running on port 3001
Open the browser and check whether it is giving a response or not.

If you manage to reach the steps above basically you are done with the basic of NodeJS. There will be an upcoming post to continue from this post as this is just a basic on how to get started with NodeJS

Thank you for your time and i hope you can gain something from this post. See you in the next post 🙌🙌

How to localise your ReactJS apps with i18next — but you're using Class Components

Nuss93 — Wed, 22 Dec 2021 10:47:46 +0000

You want to localise your React Apps and add multiple language options to your app, but your app was built years ago when class components were still a thing. You've searched through tutorials to set up localisation on your app, but a lot of tutorials out there mostly explain in the context of functional components, and the React team said that there is no need to make the swap form class to functional components as it will never deprecate.

This article will cover the basics for adding multiple languages to your React app.

1. Install the relevant dependencies

npm install i18next react-i18next i18next-browser-languagedetector --save

2. Create a js file to store your translations

Let's call this file i18n.js. This will be where all the translations are stored

import i18n from "i18next";

i18n.init({
    resources : {
        en : {
            translations : {
                Dashboard_PageHeader_Title : "This is the title in english",
                Dashboard_PageHeader_Body : "This is the body in english"
            }
        },
        my : {
            translations : {
                Dashboard_PageHeader_Title : "Ini adalah tajuk dalam Bahasa Malaysia",
                Dashboard_PageHeader_Body : "Ini adalah perenggan bawah dalam Bahasa Malaysia"
            }
        }
    },
    fallbackLng: "en",
    debug: true,

    // have a common namespace used around the full app
    ns: ["translations"],
    defaultNS: "translations",

    keySeparator: false, // we use content as keys

    interpolation: {
        escapeValue: false, // not needed for react!!
        formatSeparator: ","
    },

    react: {
        wait: true
    }
})
export default i18n;

3. Import the i18n file and pass it as a prop to I18nextProvider and wrap the entire application with the provider component

// Import files at the top of your file
// Localisation module
import { I18nextProvider } from "react-i18next";
import i18n from "./i18n";

...

// in render
render() {
        const { authenticated, loading } = this.state;
        if (loading) return <div style={{ background: '#000080' }}><div className="loading-screen"></div></div>

        return (
            <HashRouter>
                <I18nextProvider i18n={i18n}>
                    <Switch>
                        <Route path="/login" render={(props) => <LoginPage />} />
                        <PrivateRoute path="/" component={RealDashboard} authenticated={authenticated} />
                    </Switch>
                </I18nextProvider>
            </HashRouter>
        )
    }

Now that we are done with setting up your app to have multiple language, we need to set up changing the language settings, and then extract the language as your content.

4. Change the language

You may have a dropdown, radio button or any kind of form for the user to change language. Wherever you choose to call the function to change language, you do so as the following :

// top of file
import { withTranslation } from 'react-i18next';

...

// update your language in your component
class HeaderLanguageSelect extends Component {
    state = { value : 'en' }

    updateLanguage = () => {
        let newlang = this.state.value;
        this.props.i18n.changeLanguage(newlang);
        this.props.toggleModal();
    }
    render(){
        return{ your code here }
    }
}

// export default your component run through withTranslation imported above
export default withTranslation()(HeaderLanguageSelect)

5. Displaying the language

This step is almost similar to step 4, but you call the t as props and refer to the key corresponing to the content defined in your i18n.js file.

// top of file
import { withTranslation } from 'react-i18next';

...

// update your language in your component
class Dashboard extends Component {
    render(){
        return(
            <div>{this.props.t('Dashboard_PageHeader_Body')}</div>
        )
    }
}

// export default your component run through withTranslation imported above
export default withTranslation()(Dashboard)

And that's pretty much it! Hope it helps :)