Build Privacy Policy Component for Your App

Learn how to add Privacy Policy functionality to your custom React Native and Django app with Crowdbotics.

What is the Privacy Policy component and how much does it cost?

A screen that displays a boilerplate privacy policy. It usually takes between 3.6 and 4.4 hours and costs $300 to add Privacy Policy to an application.

How does the Privacy Policy component work?

This feature displays a standard privacy policy that informs users of their data rights while using the app. The text can be customized as needed.

What is the Privacy Policy component used for?

Here are some common Privacy Policy user stories in a custom app build:

As an app user, I would like to understand my privacy rights while using the app.

Privacy Policy component README file

Privacy Policy

The Privacy Policy is a ReactNative based screen that leverages the paralax with a custom header.

Installation

After you have added the screen module into your project, you will need to configure a few items by modifying the project files in the github repository. Please note to replace ####### with the numeric sequence for your screen (found in folder name under /src/features) and also that the @BluePrint tags for ImportInsertion and NavigationInsertion will be removed in future so placement is with other imports and inside the AppNavigator above other screens.

STEP 1: Add dependency library to the project.

/PROJECT_ROOT_DIRECTORY/package.json:

ADD Dependency after Line 16 (dependencies opening line ""dependencies": { ")

"react-native-parallax-scroll-view": "^0.21.3",
"react-native-cardview": "^2.0.5",

Step 2: Add screen into your project screen navigation.

/src/mainNavigator.js: ADD immediately below in the section labeled //@BlueprintImportInsertion:

import PrivacyPolicy#######Navigator from '../features/PrivacyPolicy#######/navigator.js';

ADD immediately below in the section inside AppNavigator definition labeled //@BlueprintNavigationInsertion section:

TPrivacyPolicy#######: { screen: PrivacyPolicy#######Navigator },

STEP 3: Add Terms screen into the sidemenu navigation.

/src/config/installed_blueprints.js ADD Make sure any screens that aren’t desired in the side menu are removed from the file.

In installed_blueprints.js you need to add objects for every screen that you want to show in the sidemenu/splash screen. They have a specific format:

{ name: 'PrivacyPolicy#######', human_name: 'Privacy Policy', access_route: 'PrivacyPolicy#######'}

name: doesn't matter much, its used as a unique key for the side menu and splash screens array of buttons, it must be unique, that's the only requirement

human_name: is what will be displayed in actual app

access_route: must be the name of the key in your mainNavigator setup

STEP 4: Set the left arrow screen redirect and website link.

/src/features/PrivacyPolicy#######/screens/index.js

MODIFY Line 82, (REPLACE HomeScreen177788 with your desired screen, likely your Home Screen)

onPress={() => { this.props.navigation.navigate('HomeScreen177788') }}>

MODIFY Line 124, (RREPLACE URL in onPress for READ FULL POLICY link to Website URL)

onPress={() => Linking.openURL('https://www.crowdbotics.com/privacy-policy')}

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

This component does not yet have a README file. However, another Crowdbotics user may have created this component and shared it as a free community component.

Browse our community components for the Privacy Policy component.

Full Privacy Policy component code

import Icon from 'react-native-vector-icons/FontAwesome5';
import React from 'react';
import {
  View,
  Image,
  Text,
  ImageBackground,
  TouchableOpacity
} from 'react-native';
import ParallaxScrollView from 'react-native-parallax-scroll-view';
import { styles } from './styles';
import { Linking } from 'react-native';

export default class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      privacyText: "PRIVACY POLICY - SAMPLE\nLast updated November 30, 2020\n\n\nThank you for choosing to be" +
        " part of our community at Crowdbotics (“Company”, “we”, “us”" +
        ", or “our”). We are committed to protecting your personal information and your r" +
        "ight to privacy. If you have any questions or concerns about our policy, or our " +
        "practices with regards to your personal information, please contact us at info" +
        "@crowdbotics.com.\n\n\nWhen you visit our mobile application, and use our ser" +
        "vices, you trust us with your personal information. We take your privacy very se" +
        "riously. In this privacy policy, we seek to explain to you in the clearest way p" +
        "ossible what information we collect, how we use it and what rights you have in r" +
        "elation to it. We hope you take some time to read through it carefully, as it is" +
        " important. If there are any terms in this privacy policy that you do not agree " +
        "with, please discontinue use of our Apps and our services.\n\nThis privacy polic" +
        "y applies to all information collected through our mobile application, (“Apps”)," +
        " and/or any related services, sales, marketing or events (we refer to them colle" +
        "ctively in this privacy policy as the “Services”).\n\nPlease read this privacy p" +
        "olicy carefully as it will help you make informed decisions about sharing your p" +
        "ersonal information with us."
    }
  }

  background() {
    return (
      <ImageBackground
        style={{
          height: 250,
          width: '100%'
        }}
        resizeMode={"cover"}
        source={{ uri: "https://d3tklmlrp1a8c2.cloudfront.net/media/project_component_resources/rectangle_QyfDF1b.png" }}></ImageBackground>
    )
  }

  render() {
    return (
      <ParallaxScrollView
        ref='_scrollView'
        contentBackgroundColor={"#F3F3F3"}
        renderBackground={() => (
          <View
            key="background"
            style={{
              paddingBottom: 30,
              height: 257,
              justifyContent: 'flex-end',
              alignItems: 'center'
            }}>
            <Image
              resizeMode={'contain'}
              style={{
                height: 115,
                width: 125
              }}
              source={{ uri: "https://d3tklmlrp1a8c2.cloudfront.net/media/project_component_resources/cb-icon.png" }} />
          </View>
        )}
        renderForeground={() => (
          <ImageBackground
            source={{ uri: "https://d3tklmlrp1a8c2.cloudfront.net/media/project_component_resources/halfbg.png" }}
            resizeMode={"contain"}
            style={styles.header}>
            <TouchableOpacity
              onPress={() => { this.props.navigation.navigate('Articles5195461') }}>
              <Icon
                style={{
                  width: 18,
                  height: 16
                }}
                name={'arrow-left'}
                size={18}
                color="#fff" />
              {/* <Text>hkjhaskhakjhsakjs</Text> */}
            </TouchableOpacity>
            <Text
              style={{
                fontSize: 27,
                color: '#fff',
                fontFamily: "Avenir-Medium"
              }}>Privacy Policy</Text>
            <View
              style={{
                width: 18,
                height: 16
              }}></View>
          </ImageBackground>
        )}
        parallaxHeaderHeight={257}>
        <View style={styles.parallaxHeader}>
          <View
            style={{
              paddingHorizontal: 16
            }}>
            <Text style={{ fontFamily: "Avenir-Medium", fontSize: 16, textAlign: 'center', color: '#8D8D8D' }}>{this.state.privacyText}</Text>
          </View>

          <View
            style={{
              paddingHorizontal: 16,
              alignItems: 'center',
              paddingBottom: 50,
              paddingTop: 60
            }}>

            <TouchableOpacity
              onPress={() => Linking.openURL('https://www.crowdbotics.com/privacy-policy')}
              style={{
                borderRadius: 23,
                alignItems: "center",
                justifyContent: 'center',
                backgroundColor: "#7AA741",
                height: 46,
                width: 293,
                marginTop: 10,
                marginBottom: 50
              }}>
              <Text
                style={{
                  fontSize: 15,
                  color: "#fff",
                  fontFamily: 'Avenir Heavy'
                }}>READ FULL PRIVACY POLICY</Text>
            </TouchableOpacity>
          </View>

        </View>
      </ParallaxScrollView>
    );
  }
}

This component is not yet available as a verified component in the Crowdbotics platform. However, another Crowdbotics user may have created it and shared it as a free community component.

Browse our community components for the Privacy Policy component.

Recommended components for you

All component categories

Add this feature to your project

Snap Privacy Policy into your app along with our full library of prebuilt components.

Import layouts directly from Figma and visually build backend data models.

Two-way GitHub sync and automated deployments to Heroku will have your app up and running in minutes.

Add Privacy Policy to My App

Build with more components from Crowdbotics

Crowdbotics can build your custom app with Privacy Policy functionality and hundreds of other components.

Go from specs to code 4X faster than conventional development.

Our expert PMs and developers are standing by to provide a detailed quote and build timeline.

Start Building