We Keep Coding

declaration merging for react-native-elements theme

I am using react-native-elements in my react-native application.
My app is wrapped with the ThemeProvider to pass the theme down to all components.
<SafeAreaProvider>
<ThemeProvider theme={Theme}>
<Loader visible={loader.loading} text={loader.message} absolute={true} />
<RootNavigation />
</ThemeProvider>
</SafeAreaProvider>
In the theme file i define the values i want to use across the app.
const theme = {
colors: {
primary: '#6A69E2',
primaryDark: '#4747c2',
primaryLight: 'rgba(106, 105, 226, 0.35)',
gray: {
dark: '#242424',
default: '#666',
medium: '#999',
light: '#ccc',
lightest: '#e7e7e7',
},
},
text: {
size: {
small: 12,
default: 16,
large: 18,
h1: 26,
h2: 22,
h3: 20,
},
},
Text: {
style: {
fontSize: 16,
color: '#242424',
fontFamily: 'Roboto',
},
},
Button: {
style: {
borderRadius: 50,
},
disabledStyle: {
backgroundColor: 'rgba(106, 105, 226, 0.35)',
},
},
};
export default theme;
For the values the original theme of react-native-elements providing this is working. For example i can access the colors by using
const theme = useTheme()
theme.colors.primary
But when i want to add some new properties like primaryDark i'll get an linter error.
Object literal may only specify known properties, and 'primaryDark' does not exist in type 'RecursivePartial<Colors>'.ts(2322)
In the doc of react-native-elements is a part about declaration merging, but i don't understand how i can archive this
https://reactnativeelements.com/docs/customization/#typescript-definitions-extending-the-default-theme.
Somebody could help me with this?

Well, declaration merging still works. This seems like a bug on the lib's part.
Their doc says you can augment the Color interface in module 'react-native-elements'. But currently (as of 2021-04-18, with v3.3.2) that interface is actually hidden inside module 'react-native-elements/dist/config/colors', not directly exposed at the top level, weird.
I suggest you file an issue to their repo. Never mind, someone already filed the issue.
Tested on my machine, following solution works.
import React from 'react'
import { useTheme, ThemeProvider } from 'react-native-elements'
declare module 'react-native-elements/dist/config/colors' {
export interface Colors {
primaryDark: string
primaryLight: string
}
}
const ChildComp = () => {
const theme = useTheme()
theme.theme.colors.primaryDark // <-- No more error 🎉
return <div>foobar</div>
}
Reply to OP's comment. You can augment interface however you like, as long as the augmented key doesn't exist before. For example add foobar key to FullTheme.
declare module 'react-native-elements' {
export interface FullTheme {
foobar: string
}
}

When Using MUI Button: TypeError: Cannot read property 'borderRadius' of undefined

import React, { Component } from 'react';
import './App.css';
import Screen from './components/Screen/Screen';
import Button from './components/Button/Button';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import pink from '#material-ui/core/colors/pink';
const buttonTheme = createMuiTheme({
palette: {
primary: {
main: '#2dff46',
},
secondary: pink,
}
});
class App extends Component {
render() {
return (
<MuiThemeProvider theme={buttonTheme}>
<Screen>
<div>Hello</div>
<Button variant='contained' color='primary'>
GO
</Button>
</Screen>
</MuiThemeProvider>
);
}
}
export default App;
I am simply trying to create a button with some custom colors (theme). It will work without "theme={buttonTheme}" but of course it uses the default. I get the following error:
TypeError: Cannot read property 'borderRadius' of undefined
styles
node_modules/#material-ui/core/Button/Button.js:41
38 | minWidth: 64,
39 | minHeight: 36,
40 | padding: '8px 16px',
> 41 | borderRadius: theme.shape.borderRadius,
42 | color: theme.palette.text.primary,
43 | transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
44 | duration: theme.transitions.duration.short
thanks!!

As mentioned in an earlier comment, the import statement was incorrect.
This:
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
Should be this:
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';

In case anybody else has a similar issue. The above answer never fixed my problem but pointed me in the correct direction I had to add
shape: {
borderRadius: 16
}
To my material ui theme.

So this is a two step thing for you, I'm not across Material-ui, but the main issue is that the theme-shape isn't being provided to your button component.
The first thing i'd do is debug and log out the buttonTheme constant to confirm that it is matching the theme defined in https://material-ui.com/customization/default-theme/ with the addition of your overrides.
If you can see the the shape: border-radius: 4 portion then you know it is an issue with MuiProvider, but from looking at your code it seems to be correct.
Let me know what the theme looks like (Update your question) and we can work from there

How to allow react-native to enable support for JSX (extension) files

React Native app fails to resolve components.
I am trying to import & render Test.jsx inside of App.js.
I get the following error-
error: bundling failed: Error: Unable to resolve module `./screens/Test` from App.js`:
The module `./screens/Test` could not be found from App.js. Indeed, none of these files exist
Project Manager(or rather files) look like this-
Code of Test.js-
import React, { Component } from 'react';
import {View, Text, StyleSheet} from 'react-native'
export default class Test extends Component {
render() {
return (
<View style={styles.container}>
<Text>Hello World?</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
Code of App.js-
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import Test from "./screens/Test";
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Test />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
I've literally tried every solution mentioned - react-native#4968 and none of them seem to work.
I've also referred to this, but, the solution is for css and nowhere close to what would fix this issue.
I've looked at lot more issues and SO's with no clue what else I have to do. I've also created a new project(screenshot and code is from the new project).
What am I missing?
UPDATE:
I realised that the issue was because I have .jsx extension. Imports are working fine for .js file. Any pointers on how to enable the project to accept .jsx for imports?

update: for RN >0.59 as #RedGaint pointed in https://stackoverflow.com/a/55134051/8034782 you need to configure metro.config.js in the root level.
module.exports = {
resolver: {
/* resolver options */
sourceExts: ['jsx','js'] //add here
},
transformer: {
/* transformer options */
},
serializer: {
/* serializer options */
},
server: {
/* server options */
}
/* general options */
};
For RN < 0.57:
Inside of the root of your project add a file named rn-cli.config.js and place the following code into it.
// ./rn-cli.config.js
module.exports = {
/// #description Allows you to enable support for JSX files
/// The `index.js` file in the root of your project has to be `.js`.
getSourceExts: () => [ 'jsx', 'js' ],
}
For RN > 0.57:
module.exports = {
resolver: {
sourceExts: ['jsx', 'js'],
},
};
for more reference look into this there is already an issue opened:
https://github.com/facebook/react-native/pull/5233#issuecomment-382083236

I am using react-native 0.59 and metro-react-native-babel-preset": "^0.53.0",.
The ./rn-cli.config.js file no longer works in the IOS release build. RN 0.59 requires a config file called metro.config.js in the root level. I have to use it to enable JSX support instead of rn-cli.config.js. Check out the documentation for the config file: https://facebook.github.io/metro/docs/en/configuration.html
/**
* Metro configuration for React Native
* https://github.com/facebook/react-native
*
* #format
*/
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
resolver: {
sourceExts: ['jsx','js', 'json', 'ts', 'tsx']
}
};

It seems that the config schema was changed in 0.57 version: #248
Try this:
// ./rn-cli.config.js
module.exports = {
resolver: {
sourceExts: ['jsx', 'js'],
},
};

If someone doesn't want to load the default config and spread it, then they can simply use this
In metro.config.js
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
resolver: {
sourceExts: [
'js', // note this has to be defined first or you get an error
'json',
'jsx',
'mjs',
// required because the react-native cli ignores `resolverMainFields`
'ts',
'tsx',
],
},
};

This works in ReactNative v0.63
// metro.config.js
const { getDefaultConfig } = require('metro-config');
module.exports = (async () => {
const { resolver: { sourceExts } } = await getDefaultConfig();
return { resolver: { sourceExts: [...sourceExts, 'jsx'] } };
})();
Note: This approach will not overwrite existing settings.

react-native-i18n: undefined is not an object (evaluating 'RNI18n.languages')

So, I want to setup multilanguage support for my app. On the base of react-native. However, when looking at i18n solution it pops up an error:
I followed the installation step on https://github.com/AlexanderZaytsev/react-native-i18n, everything installed and got linked ok, without errors. Tried to setup most basic sample on completely new project. The "App.js" file looks as follows:
import I18n from 'react-native-i18n'
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>{I18n.t('greeting')}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
I18n.fallbacks = true
I18n.translations = {
en: {
greeting: 'Hi!'
},
fr: {
greeting: 'Bonjour!'
}
}
Whenever I try to run it on emulator, the systems pops that error. Driving me nuts at this point. Any known solutions I have missed at this point?

In your project, execute:
$ react-native link
and reboot.
See:
https://github.com/AlexanderZaytsev/react-native-i18n#manual-setup
https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-2

is it possible to separate var styles = StyleSheet.create from React.component into different script in react native?

is it possible to separate var styles = StyleSheet.create from React.component into different script in react native?

that's possible. just create a js file with this pattern:
'use strict';
var React = require('react-native');
var myStyles = React.StyleSheet.create({
style1: { },
style2: { }
)}
module.exports = myStyles;
then in your component js use require to use that style sheet e.g. assuming your style js file is named phongyewtong.js
var s = require('../the/path/to/phongyewtong');
usage:
<View style = {s.style1} />

Both of the below links explain very well how to move styles out of your 'structural' code :
https://hackernoon.com/manage-react-native-project-folder-structure-and-simplify-the-code-c98da77ef792
https://medium.com/the-react-native-log/tips-for-styling-your-react-native-apps-3f61608655eb
Basically (copying code snippet from above link #2) have your styles in separate JS, say text.js file :
const text = StyleSheet.create({
p: {
color: 'black',
fontFamily: 'Open Sans',
fontSize: 14,
},
title: {
fontWeight: 'bold',
color: 'black',
fontFamily: 'Open Sans',
fontSize: 20,
}
});
export default text;
In React component, you can simply import this text style, and use it directly
<Text style={text.p}>settings</Text>
Hope this helps.

In a more recent React Version (0.31) I used this code:
import React, { Component, PropTypes } from 'react';
import { StyleSheet } from 'react-native';
var styles = StyleSheet.create({
...
});
module.exports = styles;