10 more stars till we get to 1k! Star it if you haven’t already 🌟 🎉

  • Run the example app with Expo to see it in action.
  • The source code for the examples are under the /example folder.

GitHub is where people build software. More than 27 million people use GitHub to discover, fork, and contribute to over 80 million projects.
Continue reading “10 more stars till we get to 1k! Star it if you haven’t already 🌟 🎉”

react-native-tinder-navigator

Released! At  #reactnative #ios #androiddev

  • Each screen has its own representative icon that is shown on the application’s header – the icon of the screen shown in the viewport is always centered, and depending on which screen you’re in, the icons of the remaining screens are shown on the left/right edges of the header.
  • Clicking on any of the left/right icons will cause a screen transition, also allowing for the icons themselves to animate while the transition is in progress.
  • The library takes care of the screen and header transitions, and leaves it up to the user to define animations that occur on the icons during the transitions.
  • At the moment in which this was developed, react-navigation did not provide screen transitions from left to right, and the header transitions were difficult to customise.
  • We have thereafter integrated this project into others that are using react-navigation with excellen results, given that this navigator behaves as any other screen in the app.

A tinder style navigator that allows you to navigate between three adjacent screens with smooth header transitions.
Continue reading “react-native-tinder-navigator”

Number Flipping Effect With ReactJS

Number Flipping Effect With ReactJS

  • In this tutorial, we’re going to use the excellent React Animated Number library to program a currency display component that changes color based on value.
  • You can check out an example with our production all at Cryptodamus – – If you enjoyed this tutorial, make sure to subscribe to our Youtube Channel and follow us on Twitter @pentacodevids for latest updates!

In this tutorial, we’re going to use the excellent React Animated Number library to program a currency display component that changes color based on value. You
Continue reading “Number Flipping Effect With ReactJS”

Styling React components with css modules and themes.

Styling #ReactJS components with #CSS modules and themes:  #JavaScript

  • Our requirementsWe have 3 different apps: web app, android and iOS.
  • Your components in the different apps share the same structure and logic, only theme settings are changing.The ProblemHow to use the same identifiers but create different styles for each app?The current scenario force us to update our components to make them aware of themes by using some plugin.
  • But sometimes, you want to create different builds for different apps; think about creating different layouts for android or iOS, or creating different themes and do some AB testing with them.This is where this loader comes handy, the idea is to create the themes in our css or sass file, and then the loader will take care of including the correct css rulesInstall itnpm install cssthemes-loader –save-devSetupWrite your css modules with selectors like you want, I recommend using it with :selector and then adding the styles there for each theme.
  • elem2 { font-size: 12px; }}Your React component will remain the same, no need to change anything there, which I think it’s the cool part of this.You’ve to include the loader before (in webpack’s logic) sass-loader or css-loader.
  • s?css$/, use: [ { loader: ‘style-loader’ }, { loader: ‘css-loader’ }, { loader: ‘sass-loader’ }, { loader: ‘cssthemes-loader’, options: { target: ‘:android’, ignore: [‘:ios’] } }, ], exclude: /node_modules/, } ],}}This example is for running with hot reloading so we’re using style-loader, but you can also use extract-text-webpack-plugin or any other, this loader just clean up the initial styling rules.Now after running the webpack command we’ll get this css for this module.elem { color: blue; font-size: 10px; text-align: center; .

We have 3 different apps: web app, android and iOS. Each app has its own custom styles.
We’re using React, Webpack and css-modules.
Your components in the different apps share the same structure and…
Continue reading “Styling React components with css modules and themes.”

Thousands of Color-coded Visualizations in React

Thousands of Color-coded Visualizations in React @nzgb  #Reactjs #JavaScript #WebDev

  • We have a sanity check at componentWillUnmount , where we call the stop method.
  • Before, each node took a color from a repeating list with a few colors.
  • The shadeIndex tracks what shade of the base color we should yield .
  • We use the Array#reduce waterfall to apply the color operations on the base color, and then round each component of the [r, g, b, a] result.
  • Color coding helps distinguish different capacity tiers by looking at the color of each slice.

For the past few days I’ve been working on a data visualization that displays Elasticsearch node distribution across different cloud instances and zones.

Continue reading “Thousands of Color-coded Visualizations in React”

The Provider and Higher-Order Component patterns with React

The provider and higher-order component patterns with #ReactJS:

  • The best way to create a reusable functionality is a Higher-Order Component.
  • const React, { Component, PropTypes } from “react” const theme = (ComponentToWrap) => { return class ThemeComponent extends Component { // let’s define what’s needed from the `context` static contextTypes = { theme: PropTypes.object.isRequired, } render() { const { theme } = this.context // what we do is basically rendering `ComponentToWrap` // with an added `theme` prop, like a hook return ( ) } } } export default theme
  • import React, { Component, PropTypes, Children } from “react” class ThemeProvider extends Component { static propTypes = { theme: PropTypes.object.isRequired, } // you must specify what you’re adding to the context static childContextTypes = { theme: PropTypes.object.isRequired, } getChildContext() { const { theme } = this.props return { theme } } render() { // `Children.only` enables us not to add a

    for nothing return Children.only(this.props.children) } } export default ThemeProvider

  • With the Provider , you are now able to pass the theme to any component who requires it.
  • Now that our theme is added to the context , we need a simple way for the components to grab it.

Lots of React libraries need to make their data pass through all your component tree. For instance, Redux needs to pass its store and React Router needs to pass the current location. This could…
Continue reading “The Provider and Higher-Order Component patterns with React”