question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Permission to convert ThemeProvider.js into functional component using react hook

See original GitHub issue

Is your feature request related to a problem? Please Describe. ThemeProvider.js file inside config folder uses Class component. It can be extracted into functional component using react new hook useState.

Describe the solution you’d like

import React, { useState } from 'react';

const ThemeProvider = ({ theme }) => {
  const [theme,setTheme] = useState({ ...colors, ...theme});

  const updateTheme = updates => {
    setTheme({
        ...theme,
        ...updates,
    });
  };

  const getTheme = () => theme;
   return (
      <ThemeContext.Provider
        value={{
          theme: theme,
          updateTheme: updateTheme,
        }}
      >
        {this.props.children}
      </ThemeContext.Provider>
   );
}
export default ThemeProvider;

I would like to create a pull request extracting ThemeProvider but useState hook to use, React dependency need to be updated. in package.json file currently react is using 16.3.1 I want to know whether I can do this, and if yes can I update react dependency to 16.8+ and React native will be updated as a result.

Additional context All it will do is create smaller class file and remove the dependency of using Javascript class

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:21

github_iconTop GitHub Comments

1reaction
sanjeevyadavITcommented, Jun 14, 2019

Thanks finally managed to update React to 16.8.0 and ran npm test and all test are passing.

My second question: in package.json there are other scripts like test:update, test:ci, test:watch do I need to run that too, if yes how do I run those test?

"scripts": {
    ...
    "test": "jest",
    "test:update": "jest -u",
    "test:ci": "jest --runInBand",
    "test:watch": "jest --watch",
    ...
  },
1reaction
iRoachiecommented, May 31, 2019

Oh when you clone the project and npm install. You can run the npm test script which will run the unit tests for the components. See https://react-native-training.github.io/react-native-elements/docs/testing.html

Read more comments on GitHub >

github_iconTop Results From Across the Web

How To Convert React Class Components to Functional ...
In this post, you'll explore five ways to convert React class components to functional components using React Hooks.
Read more >
Theming and Theme Switching with React and styled ...
Let's set up a project with React and styled-components. To do that, we will be using the create-react-app. It gives us the environment...
Read more >
How to get the theme outside styled-components?
You can use the useTheme hook since v5.0: import React, { useTheme } from 'styled-components'; export function MyComponent() { const theme ...
Read more >
useContext Hook - React Hooks Handbook - Design+Code
Let's go to our App.js file. In here, we'll import ThemeProvider from the ThemeContext file. // App.js import { ...
Read more >
Build a React theme switcher app with styled-components
Using the ThemeProvider , a wrapper component available in styled-components, we can quickly set up multiple custom themes in React and ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found