-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path91accfe2.5f9e965a.js
1 lines (1 loc) · 19.5 KB
/
91accfe2.5f9e965a.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{111:function(e,n,t){"use strict";t.d(n,"a",(function(){return d})),t.d(n,"b",(function(){return b}));var a=t(0),r=t.n(a);function i(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function c(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function o(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?c(Object(t),!0).forEach((function(n){i(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function s(e,n){if(null==e)return{};var t,a,r=function(e,n){if(null==e)return{};var t,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)t=i[a],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)t=i[a],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var l=r.a.createContext({}),u=function(e){var n=r.a.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):o(o({},n),e)),t},d=function(e){var n=u(e.components);return r.a.createElement(l.Provider,{value:n},e.children)},p={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},m=r.a.forwardRef((function(e,n){var t=e.components,a=e.mdxType,i=e.originalType,c=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),d=u(t),m=a,b=d["".concat(c,".").concat(m)]||d[m]||p[m]||i;return t?r.a.createElement(b,o(o({ref:n},l),{},{components:t})):r.a.createElement(b,o({ref:n},l))}));function b(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var i=t.length,c=new Array(i);c[0]=m;var o={};for(var s in n)hasOwnProperty.call(n,s)&&(o[s]=n[s]);o.originalType=e,o.mdxType="string"==typeof e?e:a,c[1]=o;for(var l=2;l<i;l++)c[l]=t[l];return r.a.createElement.apply(null,c)}return r.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},112:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/patreon-15b4e66595efdb2e079faf18b89cff7c.png"},116:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/01-a23cc15b10aa8903a2768742f2d5f639.png"},117:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/02-d8f056a9ee77817d5fa34ed27b8a9ded.png"},120:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/03-99e9f84b954c87f14c5b1c2a2fc7beb5.png"},121:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/04-b7fa82403420155f5bc0c2e2b713251f.png"},122:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/05-1c1a60851841e4476b56c3edf139208b.png"},123:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/06-e6c67e52061de238f27f3c609644f4b9.png"},124:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/07-8a3ce13813e6679ceb6d32560f619235.png"},129:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/08-c284e2b885bb0393ec87b2e5af025826.png"},130:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/09-e3185a977d8228e9551c978b4032cfeb.png"},94:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return c})),t.d(n,"metadata",(function(){return o})),t.d(n,"rightToc",(function(){return s})),t.d(n,"default",(function(){return u}));var a=t(3),r=t(8),i=(t(0),t(111)),c={id:"unicorn02",title:"UI Kit - Unicorn",sidebar_label:"Installation"},o={unversionedId:"unicorn02",id:"unicorn02",isDocsHomePage:!1,title:"UI Kit - Unicorn",description:"Installation",source:"@site/docs/unicorn02.md",slug:"/unicorn02",permalink:"/docs/unicorn02",editUrl:"https://github.com/facebook/docusaurus/edit/master/website/docs/unicorn02.md",version:"current",sidebar_label:"Installation",sidebar:"someSidebar",previous:{title:"UI Kit - Unicorn",permalink:"/docs/unicorn01"},next:{title:"Introduction",permalink:"/docs/auth1-00"}},s=[{value:"Add library",id:"add-library",children:[]},{value:"Add Dependencies",id:"add-dependencies",children:[]},{value:"react-native-vector-icons",id:"react-native-vector-icons",children:[]},{value:"Install Pods",id:"install-pods",children:[]},{value:"Install fonts",id:"install-fonts",children:[]},{value:"ThemeProvider",id:"themeprovider",children:[]},{value:"All UI Kit",id:"all-ui-kit",children:[]},{value:"Faker",id:"faker",children:[]},{value:"Build",id:"build",children:[]}],l={rightToc:s};function u(e){var n=e.components,c=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(a.a)({},l,c,{components:n,mdxType:"MDXLayout"}),Object(i.b)("h1",{id:"installation"},"Installation"),Object(i.b)("p",null,Object(i.b)("img",{alt:"Step01",src:t(116).default})),Object(i.b)("h2",{id:"add-library"},"Add library"),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"yarn add react-native-unicorn-uikit\n")),Object(i.b)("p",null,Object(i.b)("img",{alt:"Step02",src:t(117).default})),Object(i.b)("h2",{id:"add-dependencies"},"Add Dependencies"),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"yarn add react-native-appearance react-native-screens @react-navigation/native @react-navigation/native-stack react-native-safe-area-context react-native-spinkit yup formik faker\n")),Object(i.b)("p",null,Object(i.b)("img",{alt:"Step03",src:t(120).default})),Object(i.b)("h2",{id:"react-native-vector-icons"},"react-native-vector-icons"),Object(i.b)("p",null,"Add a library with icons"),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"yarn add react-native-vector-icons\n")),Object(i.b)("p",null,"Customize as it is written ",Object(i.b)("a",Object(a.a)({parentName:"p"},{href:"https://github.com/oblador/react-native-vector-icons"}),"here")),Object(i.b)("p",null,Object(i.b)("img",{alt:"Step04",src:t(121).default})),Object(i.b)("h2",{id:"install-pods"},"Install Pods"),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"cd ios && pod install && cd ..\n")),Object(i.b)("p",null,Object(i.b)("img",{alt:"Step05",src:t(122).default})),Object(i.b)("h2",{id:"install-fonts"},"Install fonts"),Object(i.b)("p",null,"Create a file in the root of the project /react-native.config.js"),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"module.exports = {\n project: {\n ios: {},\n android: {}\n },\n assets: ['./assets/fonts/']\n}\n")),Object(i.b)("p",null,"Download fonts ",Object(i.b)("a",Object(a.a)({parentName:"p"},{href:"https://github.com/react-native-village/react-native-unicorn/tree/master/assets/fonts"}),"here")," and then in the created directory ./assets/fonts/ put them, and after do not forget to link them."),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"react-native link\n")),Object(i.b)("p",null,"Put together all changes and if you, like me, will receive these warnings:\nduplicate output file errors, then go to Xcode and delete duplicate fonts, except for connected ones. "),Object(i.b)("p",null,Object(i.b)("img",Object(a.a)({parentName:"p"},{src:"https://miro.medium.com/max/2000/1*SwWN88tSmK2cj9qRDyTWGA.png",alt:"warning: duplicate output file errors"}))),Object(i.b)("p",null,Object(i.b)("img",{alt:"Step06",src:t(123).default})),Object(i.b)("h2",{id:"themeprovider"},"ThemeProvider"),Object(i.b)("p",null,"In App.js we connect default themes and ThemeProvider. Alternatively, you can add your own\nthemes based on this ",Object(i.b)("a",Object(a.a)({parentName:"p"},{href:"https://github.com/react-native-village/react-native-unicorn/blob/master/src/APIComponents.js"}),"this")," file."),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"import React, { useState } from 'react'\nimport { Switch, View } from 'react-native'\nimport { ThemeProvider, DarkTheme, LightTheme } from 'react-native-unicorn-uikit'\nimport UIKit from './UIKit'\n\nconst App = () => {\n const [value, setValue] = useState(!false)\n const dev = true\n const theme = value ? DarkTheme : LightTheme\n return (\n <>\n <ThemeProvider theme={theme}>\n {dev && (\n <View style={{ backgroundColor: value ? '#1D1E1F' : '#fff', height: 90 }}>\n <Switch onValueChange={setValue} value={value} style={{ alignSelf: 'center', marginTop: 50 }} />\n </View>\n )}\n <UIKit />\n </ThemeProvider>\n </>\n )\n}\n\nexport default App\n")),Object(i.b)("p",null,Object(i.b)("img",{alt:"Step07",src:t(124).default})),Object(i.b)("h2",{id:"all-ui-kit"},"All UI Kit"),Object(i.b)("p",null,"Create a UIKit file and attach a list of all components"),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),'// @flow\nimport React, { useState } from \'react\'\nimport { StyleSheet, ScrollView, View, Alert } from \'react-native\'\nimport { useTheme } from \'@react-navigation/native\'\nimport faker from \'faker\'\nimport { Formik } from \'formik\'\nimport * as Yup from \'yup\'\nimport {\n Avatar,\n H0,\n H1,\n H2,\n H3,\n H4,\n H5,\n H6,\n H7,\n H8,\n Body,\n Space,\n Developer,\n CardIssueResponceSub,\n CardIssue,\n CardIssueResponce,\n CardContacts,\n CardVacancies,\n CardAbout,\n CardInfo,\n CardCareer,\n CardResume,\n CardEducation,\n Cost,\n Header,\n HeaderMaster,\n Button,\n ButtonStatusIssue,\n ButtonCircle,\n ButtonText,\n ButtonLink,\n ButtonDeveloperSub,\n ButtonMarkDecision,\n ButtonComments,\n IconCircle,\n Rate,\n Star,\n Input,\n TabDeveloper,\n TabCompany\n} from \'react-native-unicorn-uikit\'\nimport {\n userData,\n cardCareer,\n cardContacts,\n cardEducation,\n cardIssueResponce,\n cardVacancies,\n cardIssue,\n cardResume,\n cardInfo\n} from \'./data\'\n\nconst styles = StyleSheet.create({\n scrollView: {\n paddingTop: 65,\n paddingHorizontal: 15\n }\n})\n\nconst UIKit = () => {\n const { scrollView } = styles\n const {\n colors: { backgroundColor, primary, secondary }\n } = useTheme()\n const [bool, setBool] = useState(false)\n const _onPress = () => console.log(\'click\') // eslint-disable-line\n const { image, name, lorem, random } = faker\n return (\n <>\n <ScrollView style={[scrollView, { backgroundColor }]}>\n <View style={{ alignItems: \'center\' }}>\n <H0 title="Avatars" />\n <Space height={30} />\n <Avatar uri={image.avatar()} size="xLarge" />\n <Space height={20} />\n <Avatar uri={image.avatar()} size="large" />\n <Space height={20} />\n <Avatar uri={image.avatar()} size="medium" />\n <Space height={20} />\n <Avatar uri={image.avatar()} size="small" />\n <Space height={90} />\n </View>\n\n <View style={{ alignItems: \'center\' }}>\n <H0 title="FONTS" />\n <Space height={10} />\n <H0 title="H0" />\n <Space height={1} />\n <H1 title="H1" textStyle={{ textAlign: \'center\' }} />\n <Space height={1} />\n <H2 title="H2" />\n <Space height={5} />\n <H3 title="H3" />\n <Space height={5} />\n <H4 title="H4" />\n <Space height={1} />\n <H5 title="H5" />\n <Space height={5} />\n <H6 title="H6" />\n <Space height={5} />\n <H7 title="H7" />\n <Space height={5} />\n <H8 title="H8" />\n <Space height={5} />\n <Body title="body" />\n <Space height={10} />\n <Cost title="500" />\n <Space height={90} />\n </View>\n\n <View style={{ alignItems: \'center\' }}>\n <H0 title="Buttons" />\n <Space height={30} />\n <Button title="Done" onPress={_onPress} />\n <Space height={20} />\n <Button title="Cancel" cancel />\n <Space height={30} />\n <ButtonStatusIssue title={`Open ${34}`} color={primary} />\n <Space height={30} />\n <ButtonStatusIssue title={`Closed ${34}`} color={secondary} />\n <Space height={30} />\n <ButtonCircle title="Press me" />\n <Space height={30} />\n <ButtonText title="forgot password?" />\n <Space height={30} />\n <ButtonLink title="link" />\n <Space height={30} />\n <ButtonMarkDecision />\n <Space height={30} />\n <IconCircle name=":thought_balloon:" />\n <Space height={10} />\n <IconCircle name=":telephone_receiver:" />\n <Space height={10} />\n <IconCircle name=":loud_sound:" />\n <Space height={10} />\n <IconCircle name=":thought_balloon:" />\n <Space height={30} />\n <ButtonComments title={3} />\n <Space height={30} />\n <ButtonDeveloperSub title={name.findName()} color={secondary} uri={image.avatar()} rate={random.number()} />\n <Space height={30} />\n <Rate title="2/433" />\n <Space height={30} />\n <Star star={bool} onPress={() => setBool(!bool)} />\n <Space height={90} />\n </View>\n\n <View style={{ alignItems: \'center\' }}>\n <H0 title="Tabs" />\n <Space height={30} />\n <TabDeveloper />\n <Space height={30} />\n <TabCompany />\n <Space height={90} />\n </View>\n\n <View style={{ alignItems: \'center\' }}>\n <H0 title="Inputs" />\n <Space height={30} />\n <Formik\n initialValues={{ email: \'\', password: \'\' }}\n onSubmit={(values) => Alert.alert(JSON.stringify(values))}\n validationSchema={Yup.object().shape({\n email: Yup.string().email().required(),\n password: Yup.string().min(6).required()\n })}\n >\n {({ values, handleChange, errors, setFieldTouched, touched, isValid, handleSubmit }) => (\n <>\n <Input\n name="email"\n value={values.email}\n onChangeText={handleChange(\'email\')}\n onBlur={() => setFieldTouched(\'email\')}\n placeholder="E-mail"\n touched={touched}\n errors={errors}\n />\n <Input\n name="password"\n value={values.password}\n onChangeText={handleChange(\'password\')}\n onBlur={() => setFieldTouched(\'password\')}\n placeholder="Password"\n touched={touched}\n errors={errors}\n />\n <Space height={40} />\n <Button title="Sign In" disabled={!isValid} onPress={handleSubmit} formik />\n </>\n )}\n </Formik>\n <Space height={90} />\n </View>\n\n <View style={{ alignItems: \'center\' }}>\n <H0 title="Headers" />\n <Space height={30} />\n <Header iconLeft="angle-dobule-left" />\n <Space height={30} />\n <HeaderMaster user={userData} />\n <Space height={90} />\n </View>\n\n <View style={{ alignItems: \'center\' }}>\n <H0 title="Cards" />\n <Space height={30} />\n <Developer title={name.findName()} uri={image.avatar()} rate={1} />\n <Space height={30} />\n <CardInfo obj={cardInfo} />\n <Space height={30} />\n <CardVacancies obj={cardVacancies} />\n <Space height={30} />\n <CardResume obj={cardResume} obj2={cardInfo} />\n <Space height={30} />\n <CardResume obj={cardResume} obj2={cardInfo} bool />\n <Space height={30} />\n <CardIssue obj={cardIssue} />\n <Space height={30} />\n <CardIssueResponceSub obj={cardIssueResponce} />\n <Space height={30} />\n <CardIssueResponce obj={cardIssueResponce} />\n <Space height={30} />\n <CardContacts obj={cardContacts} />\n <Space height={30} />\n <CardCareer obj={cardCareer} />\n <Space height={30} />\n <CardEducation obj={cardEducation} />\n <Space height={30} />\n <CardAbout title={lorem.paragraph()} />\n <Space height={60} />\n </View>\n </ScrollView>\n </>\n )\n}\n\nexport default UIKit\n')),Object(i.b)("p",null,Object(i.b)("img",{alt:"Step08",src:t(129).default})),Object(i.b)("h2",{id:"faker"},"Faker"),Object(i.b)("p",null,"Add a file with fake data src / data.js"),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"import faker from 'faker'\n\nconst { image, name, random, company, lorem } = faker\n\nconst userData = {\n name: name.findName(),\n uri: image.avatar(),\n star: random.boolean()\n}\n\nconst cardAbout =\n 'For 3 years our company has been engaged in financial technologies in online games, in particular in CS:GO and Dota 2. A significant number of users from all over the world use our platform to quickly and safely exchange, buy or sell their in-game items.'\n\nconst cardContacts = {\n location: 'Russia, St. Petersburg, Uprising Square',\n web: 'https://job.cs.money',\n phone: '+7 (499) 899-11-22'\n}\nconst cardInfo = {\n position: 'React-Native Developer, Front-end Developer',\n language: 'Java Script, Python',\n stack: 'React-Native, Apollo, GraphQL, AWS Amplify',\n experience: '5 years',\n salary: 5000\n}\n\nconst cardResume = {\n title: name.findName(),\n avatar: image.avatar(),\n cost: random.number(),\n rate: random.number()\n}\n\nconst cardIssue = {\n id: random.uuid(),\n title: 'How to make setState update',\n description: lorem.paragraph(),\n name: name.findName(),\n comments: random.number(),\n uri: image.avatar(),\n rate: random.number()\n}\n\nconst cardIssueResponce = {\n id: random.uuid(),\n name: name.findName(),\n uri: image.avatar(),\n description: lorem.paragraph(),\n comments: random.number(),\n rate: random.number()\n}\n\nconst cardIssueResponceSub = {\n id: random.uuid(),\n name: name.findName(),\n description: lorem.paragraph()\n}\n\nconst cardVacancies = {\n id: random.uuid(),\n title: lorem.text(),\n description: lorem.paragraph(),\n company: company.companyName(),\n cost: random.number()\n}\n\nconst cardCareer = {\n institution: company.companyName(),\n start: '2018',\n finish: '2019',\n description: lorem.paragraph(),\n link: 'Sertifikat'\n}\n\nconst cardEducation = {\n institution: company.companyName(),\n start: '2018',\n finish: '2019',\n description: lorem.paragraph(),\n link: 'Sertifikat'\n}\n\nexport {\n userData,\n cardInfo,\n cardAbout,\n cardContacts,\n cardIssueResponce,\n cardVacancies,\n cardCareer,\n cardEducation,\n cardResume,\n cardIssueResponceSub,\n cardIssue\n}\n")),Object(i.b)("p",null,Object(i.b)("img",{alt:"Step09",src:t(130).default})),Object(i.b)("h2",{id:"build"},"Build"),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"react-native run-ios\n")),Object(i.b)("p",null,"or"),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"react-native run-android\n")),Object(i.b)("p",null,"Done \u2705"),Object(i.b)("p",null,Object(i.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.patreon.com/bePatron?u=34467235"}),Object(i.b)("img",{alt:"Become a Patron!",src:t(112).default}))))}u.isMDXComponent=!0}}]);