Develop Reference

When importing workspace, in my example it is in shared/components/Header.js, when typing at the end 'export default' it says 'type any' error

I an using yarn workspaces, and i have 3 packages: app, electron app using react, and shared for all the common stuff. When importing shared in the app or electron, it says that error in vscode:
error
i dont know what to do :/ i tried everything. and the files arent ts, but js.
import { View, StyleSheet, Text } from 'react-native';
import Header from 'shared/components/Header';
//const socket = new Socket("192.168.1.146", 8080, "http");
(async () => {
//await socket.connect();
})();
const styles = StyleSheet.create({
screenContainer: {
flex: 1
},
text: {
fontSize: 20,
color: 'cornflowerblue',
marginTop: 50,
alignSelf: 'center'
}
});
const App = () => {
/*useEffect(() => {
if (socket.getSocket() != undefined && socket.getSocket().connected) {
socket.getSocket().disconnect();
}
});*/
return (
<View styles={styles.screenContainer}>
<Header />
<Text style={styles.text}>I'm a React Native component</Text>
</View>
);
};
export default App;
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
header: {
paddingTop: 50,
backgroundColor: 'red'
},
headerText: {
fontSize: 22,
color: 'white',
fontWeight: 'bold',
paddingHorizontal: 10
}
});
const Header = () => {
return (
<View style={styles.header}>
<Text style={styles.headerText}>I'm a shared component.</Text>
</View>
);
};
export default Header;

create fallback.d.ts with content:
declare module '*';
And include it in your tsconfig.json https://www.typescriptlang.org/tsconfig#include (path to d.ts file relative to tsconfig.json path)
{
"include": ["./fallback.d.ts", ...],
...
}
This will allow you to import from js files.
But imho better would be to convert Header.js file to typescript

React-Native-Paper Theme won't use Custom Fonts

I am working on a RN app using react-native-paper to handle theming and UI. I have the theme working to format my components, however when I try to incorporate custom fonts it does not have any effect on the react-native-paper components. I have followed the [font guide][1] but it did not change this issue.
I follow the expo example of how to load fonts using loadFontAsync(), and when I pass these fonts to my own components using the style prop fontFamily: 'Rubik-Regular the font works so I know it is not an issue of the font not existing.
As I am new to react-native-paper, I think my issue is with my fontConfig or configureFonts(). Any help or direction would be greatly appreciated.
import React from 'react';
import { Provider as ReduxProvider } from 'react-redux'
import configureStore from './store'
]import { configureFonts, DefaultTheme, Provider as PaperProvider } from 'react-native-paper'
import { AppLoading } from 'expo';
import * as Font from 'expo-font';
import AppNavigator from './components/AppNavigator'
const store = configureStore();
const fontConfig = {
default: {
regular: {
fontFamily: 'Rubik-Regular',
fontWeight: 'normal',
},
medium: {
fontFamily: 'Rubik-Black',
fontWeight: 'normal',
},
light: {
fontFamily: 'Rubik-Light',
fontWeight: 'normal',
},
thin: {
fontFamily: 'Rubik-LightItalic',
fontWeight: 'normal',
},
},
};
let customFonts = {
'Rubik-Regular': require('./assets/fonts/Rubik-Regular.ttf'),
'Rubik-Black': require('./assets/fonts/Rubik-Black.ttf'),
'Rubik-Light': require('./assets/fonts/Rubik-Light.ttf'),
'Rubik-LightItalic': require('./assets/fonts/Rubik-LightItalic.ttf'),
}
const theme = {
...DefaultTheme,
roundness: 30,
fonts: configureFonts(fontConfig),
colors: {
...DefaultTheme.colors,
primary: '#0d80d6',
accent: '#E68FAE',
background: '#C6E1F2',
},
}
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
fontsLoaded: false,
};
}
async loadFontsAsync() {
await Font.loadAsync(customFonts);
this.setState({ fontsLoaded: true });
}
componentDidMount() {
this.loadFontsAsync();
}
render() {
if (this.state.fontsLoaded) {
return (
<ReduxProvider store={store}>
<PaperProvider theme={theme}>
<AppNavigator/>
</PaperProvider>
</ReduxProvider>
);
}
else {
return <AppLoading/>;
}
}
}
I am using react-native 0.63.3 and Expo.

I know this is from a while ago but I ran into the same problem today and found this related issue in their repository on GitHub: https://github.com/callstack/react-native-paper/issues/1502#issuecomment-576534682
TL;DR the solution is you have to specify fontConfig.ios and probably fontConfig.android for it to work, instead of just having fontConfig.default.
for your case, you can probably adapt to something like
const _fontConfig = {
regular: {
fontFamily: 'Rubik-Regular',
fontWeight: 'normal',
},
medium: {
fontFamily: 'Rubik-Black',
fontWeight: 'normal',
},
light: {
fontFamily: 'Rubik-Light',
fontWeight: 'normal',
},
thin: {
fontFamily: 'Rubik-LightItalic',
fontWeight: 'normal',
},
};
const fontConfig = {
ios: _fontConfig,
android: _fontConfig,
};

Using createBottomTabNavigator with createStackNavigator in React Native

I am new to react native, I am trying to create a tab bar and also use createStackNavigator to allow me to link screens together. I have been able to get this to work with the following code.
const TabNavigator = createBottomTabNavigator({
Home: {
screen: HomeScreen
},
Events: {
screen: EventScreen
},
About: {
screen: AboutScreen
}
},
{ tabBarOptions: {
showIcon: true,
activeTintColor: '#D4AF37',
inactiveTintColor: 'gray',
style: {
backgroundColor: 'white',
},
labelStyle: {
fontSize: 20,
}
}
}
);
const MyStack = createStackNavigator({
Tabs: {
screen: TabNavigator
},
Home: {
screen: HomeScreen
},
Sermons: {
screen: SecondActivity
},
Map: {
screen: MapScreen
}
},
{
initialRouteName: 'Tabs',
}
);
export default createAppContainer(MyStack);
The only problem is that when I run my app each page says tabs in the header as shown below. Is there any way to fix this?

Try to set navigationOptions:
Home: {
screen: HomeScreen,
navigationOptions: ({ navigation, screenProps }) => ({
title: `My home page`
})
}

Yes you can pass navigationOptions to your different stacks!
const ENTRYSTACK= createStackNavigator(
{
ENTRY: {
screen: ENTRYSCREEN,
navigationOptions: {
headerTitle: "Your Header Title",
headerTitleStyle:{
color: "white",
alignSelf: "center" // some styling if u want
},
headerStyle:{
backgroundColor: "#a51717"
}
}
}, some other screens/stacks ...
}
)

TabNavigator customize icon error in react-native

I'm using Xcode 10 & latest react-native version.
I created StackNavigator app with TabNavigator.
Code: navigation.js Class
import React from "react";
import { TabNavigator, StyleSheet, Text, View, Image} from "react-navigation";
import Dashboard from '.././Screen/Dashboard'
import Home from '.././Screen/Home'
import Events from '.././Screen/Events'
import Settings from '.././Screen/Settings'
export default Tab = TabNavigator({
Home: {
screen: Home,
},
Settings: {
screen: Settings,
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon: ({ tintColor }) => (
<Image source={require('.././assets/setting.png')}
style= {{width:15, height:15, tintColor:'black'}}>
</Image>
)
},
},
Events: {
screen: Events,
},
}, {
tabBarPosition: 'bottom',
swipeEnabled: true,
tabBarOptions: {
showIcon: true,
activeTintColor: '#f2f2f2',
activeBackgroundColor: "#2EC4B6",
inactiveTintColor: '#666',
labelStyle: {
fontSize: 16,
padding:4,
}
}
});
But i got error here,
[fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of TabBarIcon.
If i remove this line:
tabBarIcon: ({ tintColor }) => (
<Image source={require('.././assets/setting.jpeg')}
style= {{width:15, height:15, tintColor:'black'}}>
</Image>
)
then its working perfectly without icon.
i searched everything but don't find solution.

Please try this ( assuming u r creating a bottom navigator and you have latest react navigation )
import { createBottomTabNavigator } from 'react-navigation';
export default createBottomTabNavigator({
Home: {
screen: Home,
},
Settings: {
screen: Settings,
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon: ({ tintColor }) => (
<Image source={require('.././assets/setting.png')}
style= {{width:15, height:15, tintColor:'black'}}>
</Image>
)
},
},
Events: {
screen: Events,
},
}, {
tabBarPosition: 'bottom',
swipeEnabled: true,
tabBarOptions: {
showIcon: true,
activeTintColor: '#f2f2f2',
activeBackgroundColor: "#2EC4B6",
inactiveTintColor: '#666',
labelStyle: {
fontSize: 16,
padding:4,
}
}
});

Set no header for all components React-Native

I have 4 components which all have static navigationOptions = {header: null} defined.
But that it's very time-consuming when you define that in each component.
So I define {header: null} in createStackNavigator but the header still appears at the top of the component.
Can you guys help ?
import { createStackNavigator } from 'react-navigation';
import Home from './Components/Home';
import Main from './Components/Main';
import SubjectDetail from './Components/AnimalSubject';
import Lesson from "./Components/Lesson";
const App = createStackNavigator({
First: { screen: Home },
Second: { screen: Main },
Third: { screen: SubjectDetail },
Four: {screen: Lesson},
//Route name with specified component
},
{
transitionConfig: () => ({ screenInterpolator: () => null }),
//remove transition config
},
{
initialRouteName: 'First',
//the component name 'Home' will be initiated first
},
{
header: null
//defined header: nul
}
);
export default App;
my evironment
"react": "16.3.1",
"react-native": "~0.55.2",
"react-navigation": "^2.2.5",
"node": "v8.11.2"
"npm": "v6.1.0"

Probably this code should works for you (based on Stack navigator docs)
const App = createStackNavigator({
First: { screen: Home },
Second: { screen: Main },
Third: { screen: SubjectDetail },
Four: {screen: Lesson},
},
{
headerMode: 'none',
transitionConfig: () => ({ screenInterpolator: () => null }),
initialRouteName: 'First',
},
);
You should pass the object with routes as a first parameter and common options as second.