https://github.com/sibs-projects/codemod-RN24-to-RN25

A simple codemod to handle the new import style on RN25
https://github.com/sibs-projects/codemod-RN24-to-RN25

codemod react react-native

Last synced: about 2 months ago
JSON representation

A simple codemod to handle the new import style on RN25

• Host: GitHub
• URL: https://github.com/sibs-projects/codemod-RN24-to-RN25
• Owner: sibs-projects
• Archived: true
• Created: 2016-05-04T18:29:55.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-05-04T00:19:15.000Z (over 7 years ago)
• Last Synced: 2024-07-31T13:07:59.222Z (about 2 months ago)
• Topics: codemod, react, react-native
• Language: JavaScript
• Size: 19.5 KB
• Stars: 103
• Watchers: 6
• Forks: 12
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-native - codemod-RN24-to-RN25 ★104 - a simple codemod to handle the new import style on >=RN25 (Components / Utils & Infra)

README

        
# README

Why this transform is necessary?

Until React Native 24, you import React from 'react-native' package, but [this will change in RN 25][1], you will need to import React from 'react', and also all the other React exports like Component, PropTypes, Children and so on.

You probably have many files that does this, so I've created a codemod to save you a bunch of time

# How to use this

1. Install jscodeshift

1. Download this transform

1. Navigate to the directory

1. Run the transform

```bash

# 1

npm install -g jscodeshift

# 2, 3

git clone https://github.com/sibeliusseraphini/codemod-RN24-to-RN25.git && cd codemod-RN24-to-RN25

# 4.

jscodeshift PATH_TO_FILES

```

# Example

```js

import React, {

  Component,

  View,

  Text,

  StyleSheet,

  TouchableHighlight,

  TextInput,

  PropTypes,

} from 'react-native';

import NavigationBar from 'react-native-navbar';

class LoginScreen extends Component {

  render() {

    return (

      

        

      

    );

  }

}

```

Will be transformed to:

```js

import React, {Component, PropTypes} from "react";

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

import NavigationBar from 'react-native-navbar';

class LoginScreen extends Component {

  render() {

    return (

      

        

      

    );

  }

}

```

### Recast Options

Options to [recast](https://github.com/benjamn/recast)'s printer can be provided

through the `printOptions` command line argument. See the full list of options [here](https://github.com/benjamn/recast/blob/master/lib/options.js).

```sh

jscodeshift PATH_TO_FILES --printOptions='{"quote":"double"}'

```

[1]: https://github.com/facebook/react-native/releases/tag/v0.25.1