I'm new to React Native and I wanted to implement a floating button in my React Native App like the one here: https://bit.dev/khaledebdelli/components/fancy-floaty-button
I tried importing the package for the button using npm from Terminal but it said the file didn't exist so I saved the scss file provided in my project directory.
I exactly followed the instructions from this link: https://github.com/kristerkari/react-native-sass-transformer in order to use scss files in React Native.
However, the floating button did not appear in my app. Here is what I tried to do in code:
Inside BackButton.js:
import 'react-native-gesture-handler';
import * as React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { useNavigation } from '#react-navigation/native';
{/* CSS file imported in below line of code */}
import styles from './styling/floatButton.scss'
export default function BackButton(props) {
const navigation = useNavigation();
console.log(props.title)
return (
<TouchableOpacity
style={styles.btn}
onPress={() => navigation.navigate(props.to, props.toTransfer)}
>
<Text>
{props.title}
</Text>
</TouchableOpacity>
);
}
Inside hash-tables.js where I imported BackButton.js and rendered the BackButton component:
import 'react-native-gesture-handler';
import * as React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import BackButton from '../Components/BackButton';
{*/Below line of code is inside the render function of a class component/*}
<BackButton title='Previous' to='Topics' />
This is what I see in my app instead of the floating button:
Would appreciate it if someone could point out where I may have gone wrong :)
Im guessing you don't have sass installed correctly, I usually just do: "npm install node-sass" in the front-end and works everytime :)
Related
I'm very new to React Native, and I'm trying to import an image into my app but I keep gettin this error:
InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/logo.ab75c327.png') is not a valid name.
This is my code right now:
import React from 'react';
import {Text, View, Image} from 'react-native';
import style from './styles';
import Logo from '../../../assets/images/logo.png';
export default () => {
return (
<View>
<Logo />
</View>
);
}
It should be something super simple, but for some reason it isn't working for me.
I also tried using <Image source={Logo} /> as well, but still doesn't work.
I then decided not to import the Logo and tried <Image source='../../../assets/images/logo.png' />.
When I do this, I no longer get any errors, but the image simply doesn't show up.
I have tried with other images and other formats as well, and in all cases I end up getting the same results.
What am I doing wrong?
You need to import the image using the <img> tag, like:
<img src={Logo} alt='logo'/>
Your code corrected:
import React from 'react';
import {Text, View, Image} from 'react-native';
import style from './styles';
import Logo from '../../../assets/images/logo.png';
export default () => {
return (
<View>
<img src={Logo} alt='logo'/>
</View>
);
}
I'm not a react programmer but I see the javascript import statement is for modules, not images locations. That might have something to do with it and gels with your errors.
See mozilla javascript docs here for more info on the javascript import syntax.
Cheers.
I am the first person to have this error when putting an overlay in my code
const HomeScreen = ({ navigation }) => {
const [modal, setModal] = useState(true);
return (
<View>
<Button
buttonStyle="moreBtn"
title="aaa"
onPress={() =>
navigation.navigate('Profile', { name: 'Jane' })
}
/>
<Overlay>
<Text>Hello from verlay!</Text>
</Overlay>
<Modal
animationType="slide"
transparent={true}
visible={modal}
style={styles.modal}
onPress={() => {
setModal(false)
}}
>
<View style={{height:500}}>
<Text>aaaaa</Text>
<Button onPress={() => {
setModal(false)
}}>Bouton</Button>
</View>
</Modal>
</View>
);
};
When I put overlay component JSX inside my render function, i Have this error:
Error: 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.
Why ?
I edited my post to add my following imports at the top of the file.
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { TouchableOpacity, StyleSheet, Text, View, Button, FlatList, ScrollView, Modal } from 'react-native';
import Overlay from 'react-native';
import 'react-native-gesture-handler';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
The "HomeScreen" is inside an "App" BottomTabNavigator element
export default App;
You are importing Overlay wrongly react-native doesn't have an Overlay component, you can use Overlay from react-native-elements
change
import Overlay from 'react-native';
to
import { Overlay } from 'react-native-elements';
check this:https://react-native-elements.github.io/react-native-elements/docs/overlay.html
Even though #user12129132 has already answered the question here, I'm leaving this as an answer for future finders with a little more information.
First, this error, at least as far as I know, ALWAYS means you imported something incorrectly. In the case you are importing your own component/function you may have exported it incorrectly.
For this specific example you messed up the import 2 times.
First: Overlay is not a part of react-native, so that fails.
Second: Overlay is not the default export of the package it comes from.
Imports take the following form: `import DefaultExport, { NamedExport1, NamedExport2 ...} from 'package-name/file-path';
When looking at errors like this, first check your exports, if it is your own file you are importing from, and then check your import to make sure it fits the above format, frequently you swapped the named export and default export around. Sometimes the actual error is in the file you imported, and IT has a broken import - those can be fun to trace down and fix.
Simple mistake to make, easy to fix once you learn this.
So, given the above information, your import should look like this:
import { Overlay } from 'react-native-elements';
I am trying to make an app in react native and am starting to at least place an image as the screen when you click on the app.
The problem is that the app is unable to find the image or the javascript file that I call. I tried to change the location of the files and it seems to not be doing anything.
Here is the code for the Start Screen file
import React, {Component} from 'react';
import {Image} from 'react-native';
const StartScreen = () => (
<Image source = {require('./src/assets/images/StartScreen.png')} />
)
export default StartScreen
Here is the code for the App.js file
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import StartScreen from './src/screens/StartScreen'
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View>
<StartScreen />
</View>
);
}
}
I should be getting the picture but am instead getting told that the picture or the file do not exist. The App.js file is in the top level of the folder, while the picture and StartScreen.js are in a src folder.
It sounds like your problem lies in your folder structure & the path you're using to require your image.
From what I can gather, your StartScreen.js file is in a screens folder (which is in src), and your image is in an assets folder (which is also in src).
So in your StartScreen component your relative path for your image is wrong. Take a look here for an explanation of how relative paths work.
Try the below:
<Image source = {require('../assets/images/StartScreen.png')} />
I am attempting to use a single entry file for android and iOS in a React Native app.
I have followed a few tutorials and have ended up with the following:
index.js
import React, { Component } from 'react';
import { Text } from 'react-native';
export default class Main extends Component {
render() {
return (
<Text>Hello world! from both IOS and Android</Text>
);
}
}
index.ios.js
import React from 'react';
import { AppRegistry } from 'react-native';
import {Main} from './index';
AppRegistry.registerComponent('Main', () => Main);
I end up with the following error:
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.
If I remove the curly braces from Main in the import statement it says '...but got: object' so I feel like it's something to do with my exporting/importing but nothing seems to work. Any help would be appreciated.
You are exporting your Main component as:
export default class Main extends Component {
but importing as:
import {Main} from './index';
The default export should be imported as:
import Main from './index';
If you use default export, you must import like this. If this doesn't work, there must be another problem in your code.
React Native tries to import based on platform. For example, if you have index.ios.js and index.android.js in the same folder, React Native will bundle index.ios.js only if it is bundling for ios. It is possible that when you import from ./index, React Native is revolving the path with index.ios.js instead of index.js because you are bundling for ios.
If you are curious enough, you can try to console.log the content of the imported module, e.g. console.log(Main) to see what is actually getting imported.
I am getting a "Can't find variable: React" error in my react native project. But, what baffles me is that I am not at all using React in that file, although, I am importing a custom component which uses it though. Here is a MCVE of my problem.
First up construction.js:
import React from 'react';
import { View, Text } from 'react-native';
class UnderConstruction extends React.Component {
render() {
return (
<View>
<Text style={{ padding: 75 }}>
This page is under construction :(
</Text>
</View>
);
}
}
export default UnderConstruction;
Next up, render.js:
import UnderConstruction from './construction';
export function render() {
return (
<UnderConstruction />
);
}
And lastly, index.ios.js:
import React from 'react';
import { AppRegistry } from 'react-native';
import * as Factory from './render';
class Demo extends React.Component {
render() {
return Factory.render();
}
}
AppRegistry.registerComponent('Demo', () => Demo);
Running this app will cause the error Can't find variable: React on render.js line number 5, which is:
<UnderConstruction />
I found out the problem can be solved by just adding an import statement for React on render.js like:
import React from 'react';
import UnderConstruction from './construction';
...
I am curious as to why should I import React even though I am not using it in render.js, hence this question. So, what causes Can't find variable: React error in my render.js file?
To use render function you need to import React in your file because react creates your elements. I would suggest you go through your transpiled Javascript file once, you will understand what I mean.
I was myself facing this issue sometime back and when I saw the transpiled JS file and I then I saw how it works.
So in your transpiled file it would be something similar to this:-
(0, _reactDom.render)(_react2.default.createElement(_Root2.default, { store: store, history: history }), document.getElementById('app'));