Forem: Merlier

OOP in JS : one thing to keep in mind

Merlier — Mon, 04 Oct 2021 15:40:19 +0000

Oct 28 '09

Yes, the first function has no relationship with an object instance of that constructor function, you can consider it like a 'static method'.

In JavaScript functions are first-class objects, that means you can treat them just like any object, in this case, you are only adding a property…

Open Full Answer

In RxJava, how to pass a variable along when chaining observables?

Merlier — Wed, 07 Apr 2021 13:22:51 +0000

Jan 29 '15

The advice I got from the Couchbase forum is to use nested observables:

Observable
    .from(modifications)
    .flatmap( (data1) -> {
        return op1(data1)
            ...
            .flatmap( (data2) -> { 
                // I can access data1 here
                return op2(data2);
            })
        });

EDIT: I'll mark this as the accepted answer as it seems to be the…

Open Full Answer

How to promisify node callbacks

Merlier — Sat, 09 Jan 2021 09:56:53 +0000

Consider having a classic callback in NodeJS like this one:

const fs = require('fs');

function readMyFile(myfile, options) {
    fs.readFile(myfile, options, function(err, file) {
        if(err) {
            console.log('err', err);
        } else {
            console.log('file', file);
        }
    });
}

readMyFile('myfile', 'utf8');

What if you want to do something like this

...
readMyFile('myfile', 'utf8')
    .then(file => console.log('file', file)
    ...

You can manually tranform your callback into a promise like this:

const fs = require('fs');

function readMyFilePromise(myfile, options) {
    return new Promise((resolve, reject) => {
        fs.readFile(myfile, options, function(err, file) {
            if(err) {
                console.log('err', err);
                reject(err);
            } else {
                console.log('file', file);
                resolve(file);
            }
        });
    });
}

readMyFilePromise('myfile', 'utf8')
    .then(file => console.log('file', file))
    .catch(err => console.log('err', err));

The good news is you can use the util module to do that. Moreover Util is built in nodejs.

You just have to do this:

const util = require('util');
const fs = require('fs');

const readPromise = util.promisify(fs.readFile);
readPromise('myfile', 'utf8')
    .then(file => console.log('file', file))
    .catch(err => console.log('err', err));

Have fun
:)

How to send "Happy new year" SMS using react-native on Android

Merlier — Fri, 01 Jan 2021 11:41:17 +0000

How to send a simple "Happy new year" SMS using react-native on Android.

The code of the whole app build here is available at https://github.com/Merlier/rn_example_send_sms

Get started

Requirements:

react-native >= 0.60

First just init a new react-native project:

$ npx react-native init rn_example_send_sms

Install the react-native-sms module:

$ npm install --save react-native-sms

Then add permissions in android/app/src/main/AndroidManifest.xml:

  <uses-permission android:name="android.permission.READ_SMS" />
  <uses-permission android:name="android.permission.WRITE_SMS" />
  <uses-permission android:name="android.permission.SEND_SMS" />

We will need the react-native-permissions to access SMS permission through asking the user.
So we 'll install the react-native-permissions module:

$ npm i --save react-native-permissions

Send SMS

To send SMS we will code a "sendSMS" function which will call a "getSMSPermission" function to check and request SMS permissions. Then the "sendSMS" function will use the react-native-get-sms-android module to send sms throught the "autoSend" function.

You just have to modify you app.js like this:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {useState} from 'react';
import {
  StyleSheet,
  SafeAreaView,
  View,
  Button,
  Text,
  TextInput,
} from 'react-native';
import {check, request, RESULTS, PERMISSIONS} from 'react-native-permissions';
import SmsAndroid from 'react-native-get-sms-android';

const App: () => React$Node = () => {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [message, setMessage] = useState('Happy new year!');

  const getSMSPermission = async () => {
    try {
      const checkResult = await check(PERMISSIONS.ANDROID.SEND_SMS);
      switch (checkResult) {
        case RESULTS.DENIED:
          const requestResult = await request(PERMISSIONS.ANDROID.SEND_SMS);
          return Promise.resolve(requestResult);
        case RESULTS.GRANTED:
          return Promise.resolve(checkResult);
        default:
          return Promise.reject();
      }
    } catch (err) {
      // console.log(err);
    }
  };

  const sendSMS = async () => {
    try {
      await getSMSPermission();
      SmsAndroid.autoSend(
        phoneNumber,
        message,
        (fail) => {
          console.log('Failed with this error: ' + fail);
        },
        (success) => {
          console.log('SMS sent successfully');
        },
      );
    } catch (err) {
      // console.log(err)
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.form}>
        <Text style={styles.title}>Send SMS using react-native on Android</Text>
        <TextInput
          style={styles.textInput}
          placeholder={'Phone number'}
          onChangeText={setPhoneNumber}
          value={phoneNumber}
        />
        <TextInput
          style={styles.textInput}
          placeholder={'Message'}
          onChangeText={setMessage}
          value={message}
        />
        <Button onPress={sendSMS} title="Send SMS" />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#eee',
  },
  form: {
    padding: 20,
  },
  title: {
    fontSize: 20,
    marginBottom: 20,
  },
  textInput: {
    backgroundColor: '#fff',
    marginBottom: 5,
  },
});

export default App;

Run the app:

$ npx react-native run-android

Have fun
Happy new year!
:)

Create an event in local calendar using react-native

Merlier — Thu, 24 Dec 2020 14:52:02 +0000

How to save an event in the local calendar using react-native.

The code of the whole app build here is available at https://github.com/Merlier/rn_example_calendar_events.git

Get started

Requirements:

react-native >= 0.60

First just init a new react-native project:

$ npx react-native init rn_example_calendar_events

Install the react-native-calendar-events module:

$ npm install --save react-native-calendar-events

Write some functions to interact with local calendars

We will create some functions to interact with the local calendar using the react-native-calendar-events module.
Create a LocalCalendarService.js file with:

import RNCalendarEvents from 'react-native-calendar-events';

export const listCalendars = async () => {
  let permissions;
  let calendars = [];
  try {
    permissions = await RNCalendarEvents.checkPermissions();
    if (permissions !== 'authorized') {
      permissions = await RNCalendarEvents.requestPermissions();
    }

    if (permissions !== 'authorized') {
      throw 'Access calendar not authorized';
    }

    calendars = await RNCalendarEvents.findCalendars();
  } catch {}

  return calendars;
};

export const addCalendarEvent = async (event, calendar) => {
  let permissions;
  let createdEvent = false;
  try {
    permissions = await RNCalendarEvents.checkPermissions();
    if (permissions !== 'authorized') {
      permissions = await RNCalendarEvents.requestPermissions();
    }

    if (permissions !== 'authorized') {
      throw 'Access calendar not authorized';
    }

    const eventTmp = {...event};
    eventTmp.calendarId = calendar.id;

    createdEvent = await RNCalendarEvents.saveEvent(event.title, eventTmp);
  } catch {}

  return createdEvent;
};

Make a simple calendar list modal

Before saving an event in our local calendar, we need to choose in which calendar to save this event.
So let just build a simple component for it by creating the LocalCalendarModalComponent.js file with:

import React, {useState, useEffect} from 'react';
import {
  StyleSheet,
  Modal,
  TouchableWithoutFeedback,
  View,
  ScrollView,
  TouchableOpacity,
  Text,
} from 'react-native';
import PropTypes from 'prop-types';

import {listCalendars} from './LocalCalendarService';

LocalCalendarModalComponent.propTypes = {
  isVisible: PropTypes.bool,
  closeModal: PropTypes.func,
  handleCalendarSelected: PropTypes.func,
  label: PropTypes.string,
  modalTestID: PropTypes.string,
};

LocalCalendarModalComponent.defaultProps = {
  isVisible: false,
  closeModal: () => {},
  handleCalendarSelected: () => {},
  label: 'Select a calendar',
  modalTestID: 'localCalendarModal',
};

function LocalCalendarModalComponent(props) {
  const [calendars, setCalendars] = useState([]);

  useEffect(() => {
    const loadCalendars = async () => {
      const calendarsTmp = await listCalendars();
      setCalendars(calendarsTmp);
    };
    if (props.isVisible) {
      loadCalendars();
    }
  }, [props.isVisible]);

  return (
    <Modal
      transparent={true}
      visible={props.isVisible}
      onRequestClose={props.closeModal}
      animationType="slide">
      <TouchableWithoutFeedback
        accessible={false}
        onPress={props.closeModal}
        style={styles.container}>
        <View style={styles.backdrop}>
          <View style={styles.agendaModalBody}>
            <Text style={styles.title}>{props.label} :</Text>
            <View style={styles.agendaList}>
              <ScrollView>
                {calendars.map((calendar, i) =>
                  calendar.allowsModifications ? (
                    <TouchableOpacity
                      key={i}
                      onPress={() => props.handleCalendarSelected(calendar)}
                      style={[
                        styles.calendarOption,
                        {backgroundColor: calendar.color},
                      ]}>
                      <Text key={i} style={[styles.defaultText]}>
                        {calendar.title}
                      </Text>
                    </TouchableOpacity>
                  ) : null,
                )}
              </ScrollView>
            </View>
          </View>
        </View>
      </TouchableWithoutFeedback>
    </Modal>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  backdrop: {
    flex: 1,
    padding: '5%',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0.7)',
  },
  agendaModalBody: {
    flexShrink: 1,
    backgroundColor: '#fff',
    padding: 5,
  },
  agendaList: {
    marginTop: 10,
  },
  calendarOption: {
    padding: 10,
  },
});

export default LocalCalendarModalComponent;

Create an event

So now we are able to list our local calendars and save a new event in our selected calendar by our dedicated function.
Here we 've just have to create a form to save our event.

Modify your app.js like this:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {useState} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  TextInput,
  Button,
} from 'react-native';
import LocalCalendarModalComponent from './LocalCalendarModalComponent';
import {addCalendarEvent} from './LocalCalendarService';

const App: () => React$Node = () => {
  const [isVisibleCalendars, setIsVisibleCalendars] = useState(false);
  const [event, setEvent] = useState(null);

  const [title, setTitle] = useState('');
  const [startDateStr, setStartDateStr] = useState('');
  const [endDateStr, setEndDateStr] = useState('');

  const openLocalCalendarModal = () => setIsVisibleCalendars(true);

  const closeLocalCalendarModal = () => setIsVisibleCalendars(false);

  const saveEvent = async (calendar) => {
    await addCalendarEvent(event, calendar);
    closeLocalCalendarModal();
  };

  const saveEventCalendar = async () => {
    const startDate = new Date(startDateStr);
    const endDate = new Date(endDateStr);

    const event = {
      title: title,
      startDate: startDate.toISOString(),
      endDate: endDate.toISOString(),
      allDay: true,
    };

    setEvent(event);
    openLocalCalendarModal();
  };

  return (
    <SafeAreaView style={styles.container}>
      <LocalCalendarModalComponent
        isVisible={isVisibleCalendars}
        closeModal={closeLocalCalendarModal}
        handleCalendarSelected={saveEvent}
        label={'Select a calendar'}
      />
      <View style={styles.form}>
        <Text style={styles.title}>Save calendar event</Text>
        <TextInput
          style={styles.textInput}
          placeholder={'Title'}
          onChangeText={setTitle}
          value={title}
        />
        <TextInput
          style={styles.textInput}
          placeholder={'Start date YYYY-mm-dd'}
          onChangeText={setStartDateStr}
          value={startDateStr}
        />
        <TextInput
          style={styles.textInput}
          placeholder={'End date YYYY-mm-dd'}
          onChangeText={setEndDateStr}
          value={endDateStr}
        />
        <Button onPress={saveEventCalendar} title={'Save'} />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#eee',
  },
  form: {
    padding: 20,
  },
  title: {
    fontSize: 20,
    marginBottom: 20,
  },
  textInput: {
    backgroundColor: '#fff',
    marginBottom: 5,
  },
});

export default App;

Now run the app:

$ npx react-native run-android

After you've created your new event with the app, don't forget to check the synchronization of your local calendar app.

More informations here: https://github.com/wmcmahan/react-native-calendar-events

Don't hesitate to refresh your local calendar several times before seeing your freshly created event.

Have fun
:)

1password cli script

Merlier — Sun, 20 Dec 2020 08:24:32 +0000

For those using 1password to manage their passwords,there is 1password command-line tool to script the retrieve of your passwords.

Here I'll just share some useful commands to script your password manager.

Requirements:

Log in

login() {
    eval $(op signin my)
}

Log out

login() {
    op signout
}

Retrieve password

To retrieve with jq a password from sections details or field details:

echo "$(op get item MyITEM --vault MyTeamVAULT | jq -r 'if .details.sections[0] == null then .details.fields[] |select(.designation=="password").value else .details.sections[].fields[] | select((.n=="password") or (.t=="Password")).v end'

You can modify this command to retrieve other fields than password.

P.S. jq could be used with curl to parse JSON result and do some interesting scripting tasks.

Have fun
:)

Simple animated ball in react-native

Merlier — Fri, 11 Dec 2020 18:09:47 +0000

I will just figure out here some of my progress in the animated world of react-native.
Just begin by moving a ball in the screen very simply!

The code of the whole app build here is available at https://github.com/Merlier/rn_example_animated_ball

Get started

Requirements:

react-native >= 0.60

First just init a new react-native project:



$ npx react-native init rn_example_animated_ball

Create a simple ball

in your app.js:



import React from 'react';
import {StyleSheet, View, Button} from 'react-native';

const App: () => React$Node = () => {
  return (
    <View style={styles.container}>
      <Button onPress={() => console.log('run')} title="RUN" />
      <View style={styles.ball} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  ball: {
    width: 100,
    height: 100,
    borderRadius: 100,
    backgroundColor: 'red',
  },
});

Now just move...

in your app.js:



import React, {useRef} from 'react';
import {StyleSheet, Dimensions, View, Animated, Button} from 'react-native';

const App: () => React$Node = () => {
  const windowWidth = Dimensions.get('window').width;
  const initPosition = {
    x: parseInt(windowWidth / 2) - 50,
    y: 0,
  };

  const position = useRef(new Animated.ValueXY(initPosition)).current;

  const animate = () => {
    Animated.spring(position, {
      toValue: {x: initPosition.x, y: 350},
      speed: 4,
      useNativeDriver: false,
    }).start(() => {
      position.setValue(initPosition);
    });
  };

  return (
    <View style={styles.container}>
      <Button onPress={animate} title="RUN" />
      <Animated.View style={[position.getLayout(), styles.ball]} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  ball: {
    width: 100,
    height: 100,
    borderRadius: 100,
    backgroundColor: 'red',
  },
});



$ npx react-native run-android

It's just the basics but it's the first step ;)
Have fun
:)

Nested drawer menu in react-native

Merlier — Fri, 04 Dec 2020 07:42:48 +0000

Create a react-native app with a nested multi-level drawer menu.
In this article, we'll use react-navigation to manage the drawer menu.

The code of the whole app build here is available at https://github.com/Merlier/rn_example_menu_drawer_nested.git

Note: The app.js show here is simplified. To code cleanly you have to export all your navigation and screen functions in separated jsx files.

Get started

Requirements:

react-native >= 0.60

First just init a new react-native project:

$ npx react-native init rn_example_menu_drawer_nested

Install the react-navigation module:

$ npm install --save @react-navigation/native

$ npm install --save react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Add the thwo screens Home and Settings by modifying the app.js:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import 'react-native-gesture-handler';
import React from 'react';
import {StyleSheet, View, Text} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

function HomeScreen() {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Home Screen</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Settings Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

const App: () => React$Node = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Settings" component={SettingsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({});

export default App;

Just a simple drawer

We will now build a simple drawer menu.
First install the corresponding drawer module:

$ npm install --save @react-navigation/drawer

Add the drawerItemsMain.js which will contain all the drawer route definition:

export const drawerItemsMain = [
  {
    key: 'Home',
    title: 'Home',
    route: {nav: 'MainDrawer', routeName: 'Home', title: 'Home'},
  },
  {
    key: 'Settings',
    title: 'Settings',
    route: {nav: 'MainDrawer', routeName: 'Settings', title: 'Settings'},
  },
];

Create the CustomDrawerContent.js to make the rendering of our custom drawer:

import React from 'react';
import {
  StyleSheet,
  ScrollView,
  View,
  Text,
  TouchableOpacity,
  SafeAreaView,
  Image,
} from 'react-native';

function CustomDrawerContent(props) {
  const onItemPress = (key) => {
    const filteredMainDrawerRoutes = props.drawerItems.find((e) => {
      return e.key === key;
    });
    const selectedRoute = filteredMainDrawerRoutes.route;
    props.navigation.toggleDrawer();
    props.navigation.navigate(selectedRoute.nav, {
      screen: selectedRoute.routeName,
    });
  };

  const logOut = async () => console.log('log out');

  function renderMainDrawer() {
    return (
      <View>
        {props.drawerItems.map((parent) => (
          <View key={parent.key}>
            <TouchableOpacity
              key={parent.key}
              testID={parent.key}
              onPress={() => {
                onItemPress(parent.key);
              }}>
              <View style={styles.parentItem}>
                <Text style={[styles.icon, styles.title]}>{parent.title}</Text>
              </View>
            </TouchableOpacity>
          </View>
        ))}
        {renderLogoutBtn()}
      </View>
    );
  }

  function renderLogoutBtn() {
    return (
      <View>
        <TouchableOpacity onPress={logOut} testID="customDrawer-logout">
          <View style={styles.parentItem}>
            <Text style={styles.title}>{'Log out'}</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }

  return (
    <ScrollView style={styles.drawerContainer}>
      <SafeAreaView
        style={styles.container}
        forceInset={{top: 'always', horizontal: 'never'}}>
        <View style={styles.centered}>
          <Image
            source={{uri: 'https://reactjs.org/logo-og.png'}}
            style={styles.logo}
          />
        </View>
        {renderMainDrawer()}
      </SafeAreaView>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  headerContainer: {
    height: 100,
    flexDirection: 'row',
    paddingVertical: 28,
    justifyContent: 'center',
    alignItems: 'center',
  },
  logo: {
    width: 100,
    height: 75,
  },
  drawerContainer: {
    backgroundColor: '#222222',
  },
  container: {
    flex: 1,
    zIndex: 1000,
  },
  centered: {
    alignItems: 'center',
  },
  parentItem: {
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: '#F0F0F0',
    paddingTop: 4,
    paddingBottom: 4,
  },
  title: {
    margin: 16,
    fontWeight: 'bold',
    color: '#F0F0F0',
    textAlign: 'center',
  },
});

export default CustomDrawerContent;

Then just add a CustomHeader.js to make your custom header:

import React from 'react';
import {
  StyleSheet,
  TouchableOpacity,
  View,
  Text,
  SafeAreaView,
} from 'react-native';
import {DrawerActions} from '@react-navigation/native';

function CustomHeader(props) {
  const toggleDrawer = () =>
    props.navigation.dispatch(DrawerActions.toggleDrawer());

  return (
    <SafeAreaView>
      <View style={styles.headerContainer}>
        <View style={styles.headerLeft}>
          <TouchableOpacity
            onPress={toggleDrawer}
            style={styles.leftButton}
            testID="CustomHeader-toggleDrawer">
            <Text style={styles.buttonTxt}>MENU</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.header}>
          <Text style={styles.headerTxt}>HEADER</Text>
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  headerContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#222222',
    minHeight: 40,
  },
  headerLeft: {
    flexDirection: 'row',
  },
  leftButton: {
    marginLeft: 10,
  },
  header: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    paddingRight: 40,
  },
  buttonTxt: {
    color: '#ddd',
    fontWeight: 'bold',
  },
  headerTxt: {
    color: '#ddd',
  },
});

export default CustomHeader;

Modify the app.js like this:


...

import {createDrawerNavigator} from '@react-navigation/drawer';

import {drawerItemsMain} from './drawerItemsMain';
import CustomDrawerContent from './CustomDrawerContent.js';
import CustomHeader from './CustomHeader';

const Drawer = createDrawerNavigator();

...

function MainDrawerNavigation() {
  return (
    <Drawer.Navigator
      initialRouteName="Home"
      drawerContent={(props) => (
        <CustomDrawerContent drawerItems={drawerItemsMain} {...props} />
      )}>
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Settings" component={SettingsScreen} />
    </Drawer.Navigator>
  );
}

const App: () => React$Node = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerMode: 'screen',
          headerTintColor: '#404554',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
          header: (props) => {
            return <CustomHeader {...props} />;
          },
        }}>
        <Stack.Screen name="MainDrawer" component={MainDrawerNavigation} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

...

Finally a nested multi-level drawer

Modify the draweritemsMain.js like this:

export const drawerItemsMain = [
  {
    key: 'Home',
    title: 'Home',
    routes: [{nav: 'MainDrawer', routeName: 'Home', title: 'Home'}],
  },
  {
    key: 'Settings',
    title: 'Settings',
    routes: [
      {nav: 'MainDrawer', routeName: 'Settings1', title: 'Settings 1'},
      {nav: 'MainDrawer', routeName: 'Settings2', title: 'Settings 2'},
    ],
  },
];

the CustomDrawerContent.js like this:

import React, {useState, useRef, useEffect} from 'react';
import {
  StyleSheet,
  ScrollView,
  View,
  Text,
  TouchableOpacity,
  SafeAreaView,
  Image,
} from 'react-native';

function CustomDrawerContent(props) {
  const [mainDrawer, setMainDrawer] = useState(true);
  const [filteredItems, setFilteredItems] = useState([]);

  const toggleMainDrawer = () => {
    setMainDrawer(true);
    setFilteredItems([]);
  };

  const onItemParentPress = (key) => {
    const filteredMainDrawerRoutes = props.drawerItems.find((e) => {
      return e.key === key;
    });
    if (filteredMainDrawerRoutes.routes.length === 1) {
      const selectedRoute = filteredMainDrawerRoutes.routes[0];
      props.navigation.toggleDrawer();
      props.navigation.navigate(selectedRoute.nav, {
        screen: selectedRoute.routeName,
      });
    } else {
      setMainDrawer(false);
      setFilteredItems(filteredMainDrawerRoutes);
    }
  };

  const logOut = async () => console.log('log out');

  function renderMainDrawer() {
    return (
      <View>
        {props.drawerItems.map((parent) => (
          <View key={parent.key}>
            <TouchableOpacity
              key={parent.key}
              testID={parent.key}
              onPress={() => {
                onItemParentPress(parent.key);
              }}>
              <View style={styles.parentItem}>
                <Text style={[styles.icon, styles.title]}>{parent.title}</Text>
              </View>
            </TouchableOpacity>
          </View>
        ))}
        {renderLogoutBtn()}
      </View>
    );
  }

  function renderFilteredItemsDrawer() {
    return (
      <View>
        <TouchableOpacity
          onPress={() => toggleMainDrawer()}
          style={styles.backButtonRow}>
          <Text style={[styles.backButtonText, styles.title]}>{'BACK'}</Text>
        </TouchableOpacity>
        {filteredItems.routes.map((route) => {
          return (
            <TouchableOpacity
              key={route.routeName}
              testID={route.routeName}
              onPress={() =>
                props.navigation.navigate(route.nav, {
                  screen: route.routeName,
                })
              }
              style={styles.item}>
              <Text style={styles.title}>{route.title}</Text>
            </TouchableOpacity>
          );
        })}
      </View>
    );
  }

  function renderLogoutBtn() {
    return (
      <View>
        <TouchableOpacity onPress={logOut} testID="customDrawer-logout">
          <View style={styles.parentItem}>
            <Text style={styles.title}>{'Log out'}</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }

  return (
    <ScrollView style={styles.drawerContainer}>
      <SafeAreaView
        style={styles.container}
        forceInset={{top: 'always', horizontal: 'never'}}>
        <View style={styles.centered}>
          <Image
            source={{uri: 'https://reactjs.org/logo-og.png'}}
            style={styles.logo}
          />
        </View>
        {mainDrawer ? renderMainDrawer() : renderFilteredItemsDrawer()}
      </SafeAreaView>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  headerContainer: {
    height: 100,
    flexDirection: 'row',
    paddingVertical: 28,
    justifyContent: 'center',
    alignItems: 'center',
  },
  logo: {
    width: 100,
    height: 75,
  },
  drawerContainer: {
    backgroundColor: '#222222',
  },
  container: {
    flex: 1,
    zIndex: 1000,
  },
  centered: {
    alignItems: 'center',
  },
  parentItem: {
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: '#F0F0F0',
    paddingTop: 4,
    paddingBottom: 4,
  },
  title: {
    margin: 16,
    fontWeight: 'bold',
    color: '#F0F0F0',
    textAlign: 'center',
  },
  backButtonRow: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingBottom: 17,
    paddingLeft: 3,
    borderBottomColor: '#F0F0F0',
    borderBottomWidth: 1,
  },
  backButtonText: {
    marginLeft: 10,
    color: '#F0F0F0',
  },
});

export default CustomDrawerContent;

Then we add two different settings screen in app.js:

...

function Settings1Screen() {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Settings 1 Screen</Text>
    </View>
  );
}

function Settings2Screen() {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Settings 2 Screen</Text>
    </View>
  );
}

function MainDrawerNavigation() {
  return (
    <Drawer.Navigator
      initialRouteName="Home"
      drawerContent={(props) => (
        <CustomDrawerContent drawerItems={drawerItemsMain} {...props} />
      )}>
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Settings1" component={Settings1Screen} />
      <Drawer.Screen name="Settings2" component={Settings2Screen} />
    </Drawer.Navigator>
  );
}

$ npx react-native run-android

We have now a fully nested multi-level drawer in our react-native app! :)

Hope it will help you!
Have fun :)

How to test easily your local website on real phone devices

Merlier — Fri, 27 Nov 2020 07:50:40 +0000

Imagine you're developing a cool responsive website to use with mobile. You have develop some special features like using geolocation or cam qrcode scanner to work well with mobile experience. But how to test those features in local where you just have easily access to your website through your computer.

To achieve this, You can use httpdumper.

Requirements:

node >= 11.0
wifi network where your computer with your local website and your mobile are connected together.

Install

$ npm i -g httpdumper

Getting started

Get your local computer IP

on linux with:

$ /sbin/ifconfig

you should get your local IP for your wifi interface, so something like this by example:

192.168.X.X

Run httpdumper

If you have your local website running on http://localhost:9000 from your computer. You can just start httpdumper like this:

$ httpdumper --port="3000" --host="http://localhost:9000" --uplaodDir="./uploads/"

Mobile test

Access your local website from your mobile browser at the address:

http://<your-local-ip>:3000

You will get the log requests in the terminal. If your requests have some files, they will be uploaded in the specified upload directory.

Hope it will be useful for some of you!
:)

Try react-native with docker in 5 cmd-lines

Merlier — Fri, 20 Nov 2020 08:56:41 +0000

Warning : the following method is just a way to test quickly react-native. It's not a good practice to every day work.

Requirements:

docker >= 19 (the following cmd-lines are designed for linux platform).

Init the docker

docker run --rm -ti --net host -v /dev/bus/usb:/dev/bus/usb -v $(pwd):/app reactnativecommunity/react-native-android bash

Check device connection

You need to plug an android smartphone in developer mode. Then check if the device is connected and authorized. If not don't forget to press the authorized button on your smartphone.

adb devices

Init a default react-native project

cd /app && npx react-native init helloworld

Run the project

cd helloworld && npx react-native run-android

npm start

On the smartphone, close the app and reopen it.

That's all you should have your newly created app launched!

How to internationalize a react-native app

Merlier — Fri, 13 Nov 2020 11:01:13 +0000

Create a react-native app translated in multi-languages.
In this article, we'll use react-native-localize and i18n-js npm package to manage locales and translations.

The code of the whole app build here is available at https://github.com/Merlier/rn-example-translation.git

Get started

Requirements:

react-native >= 0.60

First just init a new react-native project:

$ npx react-native init rn_example_translation

I prefer to create a src folder to put all my JS code so I modify the index.js at the project root dir like this:

import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

and then pass my app.js in the src folder.

Manage translations

We'll translate the app using 'i18n-js' module so we install it with:

$ npm install --save i18n-js

Then create a file 'i18n.js' with:

import {I18nManager} from 'react-native';
import i18n from 'i18n-js';
import memoize from 'lodash.memoize';

export const DEFAULT_LANGUAGE = 'en';

export const translationGetters = {
  // lazy requires (metro bundler does not support symlinks)
  en: () => require('./assets/locales/en/translations.json'),
  fr: () => require('./assets/locales/fr/translations.json'),
};

export const translate = memoize(
  (key, config) => i18n.t(key, config),
  (key, config) => (config ? key + JSON.stringify(config) : key),
);

export const t = translate;

export const setI18nConfig = (codeLang = null) => {
  // fallback if no available language fits
  const fallback = {languageTag: DEFAULT_LANGUAGE, isRTL: false};
  const lang = codeLang ? {languageTag: codeLang, isRTL: false} : null;

  const {languageTag, isRTL} = lang ? lang : fallback;

  // clear translation cache
  translate.cache.clear();
  // update layout direction
  I18nManager.forceRTL(isRTL);
  // set i18n-js config
  i18n.translations = {[languageTag]: translationGetters[languageTag]()};
  i18n.locale = languageTag;

  return languageTag;
};

And create the empty translation files './src/assets/locales/en/translations.json' and './src/assets/locales/fr/translations.json'

So now we can translate app JS string in english and french just like this:

i18n.t('Hello world!')

Switch locale in app

It's cool to be able to translate string but the translated strings have to match the user language. So first, we'll setup a react context to keep the current user language and a switch to give the opportunity to the user to change the language.

To keep the current user language along the app with a react context, create a file 'LocalisationContext.js' in context folder with:

import React from 'react';

const LocalizationContext = React.createContext();

export default LocalizationContext;

More info about react context

in your app.js:

import React, {useEffect, useCallback} from 'react';
import {StyleSheet} from 'react-native';

import * as i18n from './i18n';
import LocalizationContext from './context/LocalizationContext';
import HomeScreen from './HomeScreen';

const App: () => React$Node = () => {
  const [locale, setLocale] = React.useState(i18n.DEFAULT_LANGUAGE);
  const localizationContext = React.useMemo(
    () => ({
      t: (scope, options) => i18n.t(scope, {locale, ...options}),
      locale,
      setLocale,
    }),
    [locale],
  );

  return (
    <>
      <LocalizationContext.Provider value={localizationContext}>
        <HomeScreen localizationChange={handleLocalizationChange} />
      </LocalizationContext.Provider>
    </>
  );
};

and create the 'HomeScreen.js' file:

import React, {useContext} from 'react';
import {StyleSheet, SafeAreaView, Text, Button} from 'react-native';

import LocalizationContext from './context/LocalizationContext';

function HomeScreen(props) {
  const {localizationChange} = props;
  const {t, locale, setLocale} = useContext(LocalizationContext);

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>React-Native example translation</Text>
      <Text style={styles.subtitle}>{t('Home screen')}</Text>
      <Text style={styles.paragraph}>Locale: {locale}</Text>

      {locale === 'en' ? (
        <Button title="FR" onPress={() => localizationChange('fr')} />
      ) : (
        <Button title="EN" onPress={() => localizationChange('en')} />
      )}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    textAlign: 'center',
    fontSize: 22,
    marginBottom: 40,
  },
  subtitle: {
    textAlign: 'center',
    fontSize: 18,
    marginBottom: 10,
  },
  paragraph: {
    fontSize: 14,
    marginBottom: 10,
  },
  langButton: {
    flex: 1,
  },
});

export default HomeScreen;

So here we can translate strings in JS and change the user language.

Handle localization system change

A nice thing would be to detect user language automatically from the user system. To do this, we have to install the react-native-localize module:

$ npm install --save react-native-localize

and modify the app.js to this:

import React, {useEffect, useCallback} from 'react';
import {StyleSheet} from 'react-native';
import * as RNLocalize from 'react-native-localize';

import * as i18n from './i18n';
import LocalizationContext from './context/LocalizationContext';
import HomeScreen from './HomeScreen';

const App: () => React$Node = () => {
  const [locale, setLocale] = React.useState(i18n.DEFAULT_LANGUAGE);
  const localizationContext = React.useMemo(
    () => ({
      t: (scope, options) => i18n.t(scope, {locale, ...options}),
      locale,
      setLocale,
    }),
    [locale],
  );

  const handleLocalizationChange = useCallback(
    (newLocale) => {
      const newSetLocale = i18n.setI18nConfig(newLocale);
      setLocale(newSetLocale);
    },
    [locale],
  );

  useEffect(() => {
    handleLocalizationChange();

    RNLocalize.addEventListener('change', handleLocalizationChange);
    return () => {
      RNLocalize.removeEventListener('change', handleLocalizationChange);
    };
  }, []);

  return (
    <>
      <LocalizationContext.Provider value={localizationContext}>
        <HomeScreen localizationChange={handleLocalizationChange} />
      </LocalizationContext.Provider>
    </>
  );
};

and the 'i18n.js' file to this:

import {I18nManager} from 'react-native';
import * as RNLocalize from 'react-native-localize';
import i18n from 'i18n-js';
import memoize from 'lodash.memoize';

export const DEFAULT_LANGUAGE = 'en';

export const translationGetters = {
  // lazy requires (metro bundler does not support symlinks)
  en: () => require('./assets/locales/en/translations.json'),
  fr: () => require('./assets/locales/fr/translations.json'),
};

export const translate = memoize(
  (key, config) => i18n.t(key, config),
  (key, config) => (config ? key + JSON.stringify(config) : key),
);

export const t = translate;

export const setI18nConfig = (codeLang = null) => {
  // fallback if no available language fits
  const fallback = {languageTag: DEFAULT_LANGUAGE, isRTL: false};
  const lang = codeLang ? {languageTag: codeLang, isRTL: false} : null;

# Use RNLocalize to detect the user system language
  const {languageTag, isRTL} = lang
    ? lang
    : RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
      fallback;

  // clear translation cache
  translate.cache.clear();
  // update layout direction
  I18nManager.forceRTL(isRTL);
  // set i18n-js config
  i18n.translations = {[languageTag]: translationGetters[languageTag]()};
  i18n.locale = languageTag;

  return languageTag;
};

Generate translations

Last useful thing, to generate the language files you can use i18next-scanner.

Juste install it globally:

npm install -g i18next-scanner

create a 'i18next-scanner.config.js' file at your project dir root with:

const fs = require('fs');
const chalk = require('chalk');

module.exports = {
  input: [
    'src/**/*.{js,jsx}',
    // Use ! to filter out files or directories
    '!app/**/*.spec.{js,jsx}',
    '!app/i18n/**',
    '!**/node_modules/**',
  ],
  output: './',
  options: {
    debug: false,
    removeUnusedKeys: true,
    func: {
      list: ['i18next.t', 'i18n.t', 't'],
      extensions: ['.js', '.jsx'],
    },
    trans: {
      component: 'Trans',
      i18nKey: 'i18nKey',
      defaultsKey: 'defaults',
      extensions: [],
      fallbackKey: function (ns, value) {
        return value;
      },
      acorn: {
        ecmaVersion: 10, // defaults to 10
        sourceType: 'module', // defaults to 'module'
        // Check out https://github.com/acornjs/acorn/tree/master/acorn#interface for additional options
      },
    },
    lngs: ['en', 'fr'],
    ns: ['translations'],
    defaultLng: 'en',
    defaultNs: 'translations',
    defaultValue: '__STRING_NOT_TRANSLATED__',
    resource: {
      loadPath: 'src/assets/locales/{{lng}}/{{ns}}.json',
      savePath: 'src/assets/locales/{{lng}}/{{ns}}.json',
      jsonIndent: 2,
      lineEnding: '\n',
    },
    nsSeparator: false, // namespace separator
    keySeparator: false, // key separator
    interpolation: {
      prefix: '{{',
      suffix: '}}',
    },
  },
  transform: function customTransform(file, enc, done) {
    'use strict';
    const parser = this.parser;

    const options = {
      presets: ['@babel/preset-flow'],
      plugins: [
        '@babel/plugin-syntax-jsx',
        '@babel/plugin-proposal-class-properties',
      ],
      configFile: false,
    };

    const content = fs.readFileSync(file.path, enc);
    let count = 0;

    const code = require('@babel/core').transform(content, options);
    parser.parseFuncFromString(
      code.code,
      {list: ['i18next._', 'i18next.__']},
      (key, options) => {
        parser.set(
          key,
          Object.assign({}, options, {
            nsSeparator: false,
            keySeparator: false,
          }),
        );
        ++count;
      },
    );

    if (count > 0) {
      console.log(
        `i18next-scanner: count=${chalk.cyan(count)}, file=${chalk.yellow(
          JSON.stringify(file.relative),
        )}`,
      );
    }

    done();
  },
};

Here you can use the command :

$ i18next-scanner

It will generate and pre-fill the translation files './src/assets/locales/en/translations.json' and './src/assets/locales/fr/translations.json'. You will just have to change in these files by the right translations.

Running

$ npx react-native run-android

$ npx react-native run-ios

The code of the whole app build here is available at https://github.com/Merlier/rn-example-translation.git