I am using Native base library in React Native.
In native base, there is component called Button and also there Component Button from 'react-native'.
If i want to use both Button components simultaneously, what should I do?
You can use alias
import { Button } from 'react-native'
import { Button as ButtonBase } from 'native-base';
and
<Button /> {# React Native Button #}
<ButtonBase /> {# Native Base Button #}
You can simply use use ALIAS by adding word as between the default name and the new name you want example:
import {View as V} form react-native;
and in your render() function you can call it like the
<V>...</V>
so for your question you can do this you can do this
import {Button as ButtonMain} from react-native;
import {Button as ButtonRB} from react-native;
and you can call them in your render() function like this:
<ButtonMain />
<ButtonRB />
Related
I'm trying to create my custom header component for a react native app,
import React from 'react'
import { StatusBar } from 'react-native'
import Svg, { Path } from 'react-native-svg'
export default function App () {
StatusBar.setHidden(true)
return (
<Svg
xmlns='http://www.w3.org/2000/svg'
xlink='http://www.w3.org/1999/xlink'
width='100%'
height='186.919'
viewBox='0 0 574.211 186.919'
>
<Path
id='Path_2524-2'
data-name='Path 2524'
class='cls-1'
d='M-815.085,1.627-985.466,25.151a739.285,739.285,0,0,1-202.451,0L-1358.3,1.627V-123.778h543.212Z'
transform='translate(1373.8 134.28)'
fill={'red'}
/>
</Svg>
)
}
I have attached my code, as well as the outcome photo.
I've tried changing the values of height and width in the svg component with no luck,I have also tried containing it in a view with absolute position, it's not getting the full width as well, can someone help me to accomplish what is in the second photo?
I am working on a social media app where i have a container component that has the following structure
<MyContainer>
<SelectionBar/>
{condition? <FlatListA header={header}/> : <FlatListB header={header}/>}
<MyContainer/>
the selection bar has buttons that determine which FlatList to display for the purpose of this question lets say messages FlatList vs posts FlatList
these two FlatLists have different listeners and data so they need to be their own component but they share the same ListHeaderComponent which is a feature similar to snapchat stories
the problem is when the user switches between two FlatLists the stories flicker because the component is re rendered because its two different FlatLists
the header needs to be inside the flatlist as a ListHeaderComponent because when the user scrolls down the stories should not stick to the top
is there any way to prevent this re rendering?
I've tried React.memo but that did not work
You can prevent re-rendering of same component by using React.memo
You can define your header component and pass it as a prop like:
import { memo } from "react";
import FlatListA from "./FlatListA";
import FlatListB from "./FlatListB";
const header = memo((props) => {
console.log("header render");
return <h1>this is header</h1>;
});
export default function App() {
return (
<div className="App">
<FlatListA header={header} />
<FlatListB header={header} />
</div>
);
}
and you can use it in your FlatList components like:
import { useState } from "react";
export default function FlatListA(props) {
console.log("flatlista render");
const [toggle, setToggle] = useState(false);
return (
<div>
<props.header />
FlatlistA {toggle}
<button onClick={() => setToggle(!toggle)}>toogle state</button>
</div>
);
}
You can take a look at this example codesandbox and click buttons to change state and see console outputs that it does not re-render header components.
So this is basically the code I have
import { Ionicons } from '#expo/vector-icons';
class DrawerItem extends React.Component {
render() {
return (
<Ionicons name="speedometer" size={14} color="green" />
)
}
}
I am trying to use an icon called speedometer, as found in the Ionicons documentation.
However, in its place, a question mark ? appears and I get the following error:
Warning: Failed prop type: Invalid prop `name` of value `speedometer` supplied to `Icon`, expected one of ["ios-add","ios-add-circle","ios-add-circle-outline","ios-airplane","ios-alarm","ios-albums","ios-alert","ios-american-football","ios-analytics","ios-aperture","ios-apps","ios-appstore","ios-archive","ios-arrow-back","ios-arrow-down","ios-arrow-dropdown","ios-arrow-dropdown-circle","ios-arrow-dropleft","ios-arrow-dropleft-circle","ios-arrow-dropright","ios-arrow-dropright-circle"...
The error shows me the names I can use, but makes no sense because the Ionicons documentation mentions that there is an icon called speedometer.
Another thing that I found is that that specific icon does not appear in the Expo Vector Icons documentation.
However, I would like to add it. Any way to include ALL icons from the Ionicons library?
You have to import icons this way:
import { MaterialCommunityIcons } from '#expo/vector-icons';
<MaterialCommunityIcons name="speedometer" size={24} color="black" />
As you stated Ionicons does not contain the speedometer icon. Instead use ios-speedometer.
If you really want that specific icon, I'd recommend downloading the SVG and converting it to a standalone component using e.g. react-svgr (or any other svg jsx tool)
Dont forget to install react-native-svg :)
You can now import the icon using a normal import.
E.g. import SpeedometerIcon from './icons/Speedometer.js'
As I know about it, This checks and gives warnings for React-Native code and its lifecycles.
I read about it from What is StrictMode in react?
How can I use it in react native ?
Here is a simple example to use StrictMode in React Native
StrictMode can be directly imported from React and can used like wrapping up View inside it.
import React, {Component, StrictMode} from 'react';
import {View} from 'react-native';
class Example extends Component {
render() {
return (
<StrictMode>
<View />
</StrictMode>
);
}
}
export default Example;
I'm using Native Base 2.0+, the themes are ejected and using StyleProvider I am able to tweak and customize any Native Base component according to my theme, no problem.
Following the docs, it's stated that to add themes to a custom component we should define a namespace for said component and merge it with the instantiated styling as well. Code example below:
import React, { Component } from 'react'
import { Header, Left, Body, Right, Button, Title, Text, connectStyle } from 'native-base'
import Colors from '../Themes/Colors'
import ApplicationStyles from '../Themes/ApplicationStyles'
class NBHeader extends Component {
render () {
const styles = this.props.style
return (
<Header style={styles.header}>
<Left>
<Button transparent>
<Text style={styles.headerBackButton}>
{'< Back'}
</Text>
</Button>
</Left>
<Body>
<Title>Login</Title>
</Body>
<Right />
</Header>
)
}
}
export default connectStyle('CustomComponents.Header', ApplicationStyles)(NBHeader)
In this case, namespace for the component is 'CustomComponents.Header'. Then, we use StyleProvider to connect the Theme:
import React, { Component } from 'react';
import { StyleProvider } from 'native-base';
class CustomComponent extends Component {
render() {
return (
// connect styles to props.style defined by the theme
const styles = this.props.style;
<StyleProvider style={customTheme}>
Your Custom Components
</StyleProvider>
);
}
}
// Define your own Custom theme
const customTheme = {
'yourTheme.CustomComponent': {
// overrides CustomComponent style...
}
};
Since I've ejected the theme, I entered the new namespace for the Custom Component in NB's Theme file, so it should already be added and cascaded using StyleProvider.
So for instance, if I want the header to be 'red' and have a padding of '10' due to theming rules, I add those as default props of 'CustomComponents.Header' and forget about it, it will always be applied to the component as long as the StyleProvider is cascading themes.
The problem is I cannot get this defined Custom Component's default theme to be applied. I don't know if it's a problem with my code or how Native Base works. Any help would be appreciated and I can provide further code if needed.