Modify the existing pages.
To change the title of the current 3 pages. only need to Add and modify the following language variables.
- HELP_WITH_AN_ORDER
- ACCOUNT_AND_PAYMENT_OPTIONS
- GUIDE_TO_ORDERING
To modify the content of each Static Page, you need to download the following file. Zip: https://www.dropbox.com/sh/cq12xdh2jetf80e/AABCwsOhxKC41Q6xyfwMbclta/RNFiles1.zip?dl=0
Unzip the file.
On this example, we will modify the content of the page Account and Payment Options
Open the file index.tsx in the folder HelpAccountAndPayment
Search:
<OText mBottom={20}>
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.
</OText>
<OText mBottom={20}>
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.
</OText>
<OText mBottom={20}>
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.
</OText>
<OText>
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.
</OText>
Replace:
<OText mBottom={20}>
-Hello this is an example Line 1
</OText>
<OText mBottom={20}>
-Hello this is an example Line 2
</OText>
<OText mBottom={20}>
-Hello this is an example Line 3
</OText>
<OText>
-Hello this is an example Line 4
</OText>
Save the changes and upload the files in your Builder<Developer<Custom.
Type: TSX
Paths:
- src/components/HelpAccountAndPayment/index.tsx
- src/components/HelpAccountAndPayment/styles.tsx
- src/components/HelpGuide/index.tsx
- src/components/HelpGuide/styles.tsx
- src/components/HelpOrder/index.tsx
- src/components/HelpOrder/styles.tsx
Once you upload each file to the corresponding path and file. it should like this:
Then add the following in the Search and Replace section:
Path: src/pages/HelpAccountAndPayment.tsx
Search:
import React from 'react'
import { HelpAccountAndPayment as HelpAccountAndPaymentController, Container } from 'ordering-ui-react-native'
Replace:
import React from 'react'
import { Container } from 'ordering-ui-react-native'
import { HelpAccountAndPayment as HelpAccountAndPaymentController } from '../components/HelpAccountAndPayment'
Path: src/pages/HelpGuide.tsx
Search:
import React from 'react'
import { HelpGuide as HelpGuideController, Container } from 'ordering-ui-react-native'
Replace:
import React from 'react'
import { Container } from 'ordering-ui-react-native'
import { HelpGuide as HelpGuideController } from '../components/HelpGuide'
Path: src/pages/HelpOrder.tsx
Search:
import React from 'react'
import { HelpOrder as HelpOrderController, Container } from 'ordering-ui-react-native'
Replace:
import React from 'react'
import { Container } from 'ordering-ui-react-native'
import { HelpOrder as HelpOrderController } from '../components/HelpOrder'
Once you have added the search and replace, it should look like this:
Once you have finished applying the changes, build your app, and you will see the changes.
Create new pages in the Help Section
In builder on React Native product, add the following in Search and Replace
1
Path: src/pages/Help.tsx
Search:
import React from 'react'
import { Help as HelpController, Container } from 'ordering-ui-react-native'
Replace:
import React from 'react'
import { Container } from 'ordering-ui-react-native'
import { Help as HelpController } from '../components/Help'
2
Path: src/navigators/HomeNavigator.tsx
Search:
import HelpAccountAndPayment from '../pages/HelpAccountAndPayment'
Replace:
import HelpAccountAndPayment from '../pages/HelpAccountAndPayment'
import NewHelpPage from '../pages/NewHelpPage'
3
Path: src/navigators/HomeNavigator.tsx
Search:
<Stack.Screen
name="HelpAccountAndPayment"
component={HelpAccountAndPayment}
options={{ headerShown: false }}
/>
Replace:
<Stack.Screen
name="HelpAccountAndPayment"
component={HelpAccountAndPayment}
options={{ headerShown: false }}
/>
<Stack.Screen
name="NewHelpPage"
component={NewHelpPage}
options={{ headerShown: false }}
/>
Once you have added this.
Download the following file: https://www.dropbox.com/sh/cq12xdh2jetf80e/AAAGatT9WPpGwVUTFwxPfmIOa/RNFiles2.zip?dl=0
Open the file index.js in folder Help and modify the following code sections:
<HelpSubItem
onPress={() => onRedirect('HelpGuide')}
>
<OText size={14}>{t('GUIDE_TO_ORDERING', 'Guide to Ordering')}</OText>
</HelpSubItem>
Replace with:
<HelpSubItem
onPress={() => onRedirect('HelpGuide')}
>
<OText size={14}>{t('GUIDE_TO_ORDERING', 'Guide to Ordering')}</OText>
</HelpSubItem>
<HelpSubItem
onPress={() => onRedirect('NewHelpPage')}
>
<OText size={14}>Title_NewHelpPage</OText>
</HelpSubItem>
After you have added the code, save the file.
In the Custom section in Developers, add the files.
Type: TSX
For the file index.js in folder Help use the following path.
- src/components/Help/index.tsx
For the file styles.js in folder Help use the following path.
- src/components/Help/styles.tsx
For the file index.js in folder NewHelpPage use the following path.
- src/components/NewHelpPage/index.tsx
For the file styles.js in folder NewHelpPage use the following path.
- src/components/NewHelpPage/styles.tsx
For the file NewHelpPage.tsx use the following path.
- src/pages/NewHelpPage.tsx
After you have added all the files in builder, you need to update your app to apply the changes.
Video Example:
If you need anything else from your Ordering Team, just let us know
Have a Happy Ordering
