How to stack the same component when editing after writing - react-native

<Stack.Screen name="Complain" component={Complain} />
<Stack.Screen name="ComplainList" component={ComplainList} />
<Stack.Screen name="ComplainUpdate" component={Complain} />
How do I stack it up? Complain === ComplainUpdate
<Stack.Screen name="Complain" component={Complain} />
<Stack.Screen name="ComplainList" component={ComplainList} />
<Stack.Screen name="ComplainUpdate" component={ComplainUpdate} />
I've copied the same components and stacked them up, but this doesn't seem like a good idea. Is there any good way?

<Stack.Screen name="Complain" component={Complain} />
<Stack.Screen name="ComplainList" component={ComplainList} />
<Stack.Screen name="ComplainUpdate" component={ComplainUpdate} />
<Stack.Screen name="ComplainAdd" component={ComplainAdd} />
just.. copy and paste.. i'm sorry

Related

TailwindCSS / React Native: overflow scroll not working?

I want to be able to scroll down the list of tweets on my react native app using tailwind css and Expo. Any ideas?
const HomeScreen = () => {
return (
<>
<View className="flex-col overflow-y-scroll h-screen">
<Tweet />
<Tweet />
<Tweet />
<Tweet />
<Tweet />
<Tweet />
<Tweet />
<Tweet />
<Tweet />
<Tweet />
<Tweet />
<Tweet />
<Tweet />
<Tweet />
<Tweet />
<Tweet />
</View>
</>
);
};
export default HomeScreen;

Something went wrong page after after pressing on DeleteButton

Everytime I click on a delete button in a List component, the page shows this error page.
The deletion works though.
The error page
export const MaterialList = props => (
<List {...props}>
<Datagrid rowClick="edit">
<NumberField source="REGEL_ID" />
<DateField source="STAND" />
<NumberField source="MaterialID" />
<NumberField source="DruckstufenID" />
<TextField source="Bezeichnung" />
<TextField source="Bezeichnung2" />
<TextField source="pA_Artikel" />
<TextField source="Menge" />
<NumberField source="DefaultHaken" />
<NumberField source="Verdichten" />
<TextField source="pA_Artikel_Original" />
<EditButton />
<DeleteButton />
</Datagrid>
</List>
);
Is there someone who atleast understands the error message?
We noticed this bug a few days ago and it has been fixed in v3.3.3.

hide drawer in a specific screen

hey there i a mworking with a react native project using React router flux for navigation everything is ok except that i want to hide the drawer from signin Screen and tuto screen
here is my code bellow
const RouterRedux = connect()(Router);
<RouterRedux backAndroidHandler={() => {}}>
<Drawer
hideNavBar
open={false}
key="drawer"
contentComponent={SideBar}
drawerWidth={300}
// drawerLockMode={show ? 'locked-closed' : 'unlocked'}>
>
<Scene key="root" hideNavBar transitionConfig={transitionConfig}>
<Scene key="Tuto" component={Tuto} type={ActionConst.RESET} />
<Scene
initial
key="CheckAuth"
component={CheckAuth}
type={ActionConst.RESET}
/>
{/*<Scene key="WIP" component={WorkInProgress} />*/}
<Scene key="SignIn" component={SignIn} />
<Scene key="ResetPassword" component={ResetPassword} />
<Scene key="Visits" component={Visits} />
<Scene key="VisitDetails" component={VisitDetails} />
<Scene key="Statistiques" component={Statistiques} />
<Scene key="Notification" component={Notification} />
<Scene key="Sync" component={Sync} />
</Scene>
</Drawer>
</RouterRedux>
so how can i hide the drawer from signin screen and tuto screen ?
I found the way to lock the drawer, and doing some changes works with your show lock/unlock variable.
You need to separate the group of scenes with drawer locked and the other one (unlocked), something like that...
<RouterRedux backAndroidHandler={() => { }}>
<Drawer
hideNavBar
open={false}
key="drawer"
contentComponent={SideBar}
drawerWidth={300}
// drawerLockMode={show ? 'locked-closed' : 'unlocked'}>
>
<Scene
key="root" hideNavBar
transitionConfig={transitionConfig}
drawerLockMode='locked-closed'
>
<Scene key="Tuto" component={Tuto} type={ActionConst.RESET} />
<Scene
initial
key="CheckAuth"
component={CheckAuth}
type={ActionConst.RESET}
/>
</Scene>
<Scene
key="root2"
hideNavBar
transitionConfig={transitionConfig}
drawerLockMode='unlocked'
>
{/*<Scene key="WIP" component={WorkInProgress} />*/}
<Scene key="SignIn" component={SignIn} />
<Scene key="ResetPassword" component={ResetPassword} />
<Scene key="Visits" component={Visits} />
<Scene key="VisitDetails" component={VisitDetails} />
<Scene key="Statistiques" component={Statistiques} />
<Scene key="Notification" component={Notification} />
<Scene key="Sync" component={Sync} />
</Scene>
</Drawer>
</RouterRedux>

How do i use Drawer with Tabs for navigation in react-native-router-flux v4

how to combine Tabs and Drawer in react-native-router-flux ?
Already i have my Tabs who work :
<Router>
<Scene hideNavBar key='root'>
<Tabs
inactiveTintColor={'#acacac'}
activeTintColor={'#000'}
activeBackgroundColor={'#eee'}
animationEnabled={false}
swipeEnabled={true}
tabBarPosition='bottom'>
<Scene
tabBarIcon={({ tintColor }) => <Icon name='ios-home' size={25} color={tintColor}/>}
navBar={Header}
key='gray'
component={GrayScreen}
title='Gray' />
<Scene
tabBarIcon={({ tintColor }) => <Icon name='ios-search' size={25} color={tintColor}/>}
navBar={Header}
key='scarlet'
component={ScarletScreen}
title='Scarlet' />
<Scene
tabBarIcon={({ tintColor }) => <Icon name='ios-notifications' size={25} color={tintColor}/>}
navBar={Header}
key='red'
component={RedScreen}
title='Red' />
<Scene
tabBarIcon={({ tintColor }) => <Icon name='ios-mail' size={25} color={tintColor}/>}
navBar={Header}
key='blue'
component={BlueScreen}
title='Blue' />
</Tabs>
</Scene>
</Router>
I've tried so many things to add a but it dosent works ...
this works fine for me
<Router>
<Scene key="root"
drawer={true}
contentComponent={SideMenu}
drawerIcon={dr}
drawerWidth={260}
navigationBarStyle={{backgroundColor:'#16334c'}}
titleStyle={{color:'#fff'}}>
<Scene
key="splash"
component={Splash}
hideNavBar
timeout={2000}
nextScene={'login'}
initial
/>
<Scene
key="workOrder"
component={WorkOrder}
title="Work Orders"
/>
<Scene
key="addwork"
component={AddWork}
title="Create New Work Order"
back={true}
backButtonTintColor="white"
/>
<Scene
key="prementive"
component={Prementive}
title="PMs"
/>
<Scene
key="scanBarcode"
component={ScanBarcode}
title="Scan or Enter Barcode"
/>
<Scene
key="partLocation"
component={PartLocations}
title="Part Locations"
back={true}
backButtonTintColor="white"
/>
<Scene
key="checkAdjustStock"
component={CheckAdjustStock}
title="Check/Adjust Stock"
/>
<Scene
key="meteredPm"
component={MeteredPm}
title="Metered PMs"
/>
<Scene
key="partsForLocation"
component={PartsForLocation}
title="Parts For Locations"
back={true}
backButtonTintColor="white"
/>
<Scene
key="equipmentForLocation"
component={EquipmentForLocation}
title="Equipment For Locations"
/>
<Scene
key="barcodeAssign"
component={BarcodeAssign}
title="Barcode Assign"
/>
<Scene
key="addPartLocations"
component={AddPartLocations}
title="Add Parts Location"
back={true}
backButtonTintColor="white"
/>
<Scene
key="addBarcodeEquipment"
component={AddBarcodeEquipment}
title="Add Barcode to Equipment"
back={true}
backButtonTintColor="white"
/>
<Scene
key="addBarcodeParts"
component={AddBarcodeParts}
title="Add Barcode to Parts"
back={true}
backButtonTintColor="white"
/>
<Scene
key="addPrementive"
component={AddPrementive}
title="Add PM"
back={true}
backButtonTintColor="white"
/>
<Scene
key="addEquipment"
component={AddEquipment}
title="Add Equipment"
back={true}
backButtonTintColor="white"
/>
<Scene
key="addLocation"
component={AddLocation}
title="Add Location"
back={true}
backButtonTintColor="white"
/>
<Scene
key="addParts"
component={AddParts}
title="Add Parts"
back={true}
backButtonTintColor="white"
/>
<Scene
key="equipment"
component={Equipment}
title="Equipment"
/>
<Scene
key="location"
component={Location}
title="Locations"
/>
<Scene
key="parts"
component={Parts}
title="Parts"
/>
<Scene
key="login"
component={Login}
title="Login"
/>
<Scene
key="logout"
component={Logout}
title="Logout"
hideNavBar
/>
<Scene
key="dashboard"
component={Dashboard}
title="Dashboard"
/>
</Scene>
</Router>

How come my route isn't matching with React Router 4?

I have a routes file that works as expected:
<Route path="/app" render={({match}) => (
<Switch>
<Route exact path={`${match.url}/`} component={Home} />
<Route path={`${match.url}/error`} component={Error} />
</Switch>
</Route>
But when I try to hard code the routes, it does not work. For example:
<Route path="/app" render={({match}) => (
<Switch>
<Route exact path={`app/`} component={Home} />
<Route path={`app/error`} component={Error} />
</Switch>
</Route>
Of course hard coding is not what I really want, but in case I wanted to do something like this
<Route path="/app">
<Switch>
<Route exact path="app/" component={Home} />
<Route path="app/error" component={Error} />
</Switch>
</Route>
And create the app using the Children of the Route and not the render prop. What am I doing wrong, or how can I accomplish this?
React router V4 doesn't use nested routes.
<Route path="/app"> will match anything that begins with /app, which I don't think is what you want.
This should be enough to do what you want:
<Switch>
<Route exact path={`/app/error`} component={Error} />
<Route path={`/app`} component={Home} />
</Switch>