Skip to content

Commit 9b704ce

Browse files
author
PierreCapo
committed
✨ add border radius
1 parent 6aa203e commit 9b704ce

File tree

3 files changed

+34
-23
lines changed

3 files changed

+34
-23
lines changed

‎README.md‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,12 @@ import {Instagram} from "react-native-socials";
3232

3333
Props:
3434

35-
| Name | Type | Default | Description |
36-
| -------- | ----------- | --------------------------------------------- | -------------------------------------- |
37-
| id | string | **Required** | Instagram post id |
38-
| darkMode | bool | false | Toggle dark mode |
39-
| language | string enum | "en" - "de" - "fr" - "es" - "pt" - "it" -"ru" | Pick language for metadata of the post |
35+
| Name | Type | Default | Description |
36+
| --------------------- | ----------- | --------------------------------------------- | ------------------------------------------------ |
37+
| id | string | **Required** | Instagram post id |
38+
| darkMode | bool | false | Toggle dark mode |
39+
| language | string enum | "en" - "de" - "fr" - "es" - "pt" - "it" -"ru" | Pick language for metadata of the post |
40+
| containerBorderRadius | number | 0 | Border radius of the container of the UI element |
4041

4142
### Twitter
4243

@@ -58,14 +59,15 @@ Unlike Instagram, the **Twitter API is not open**. It is needed that you registe
5859

5960
Props:
6061

61-
| Name | Type | Default | Description |
62-
| ------------------ | ---------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
63-
| id | string | **Required** | Twitter post id |
64-
| consumerKey | string | **Required** | OAuth 1.0 Twitter key that is granted when you [register your app on Twitter Portal](https://developer.twitter.com/en/docs/basics/authentication/oauth-1-0a) |
65-
| consumerSecret | string | **Required** | OAuth 1.0 Twitter secret that is granted when you [register your app on Twitter Portal](https://developer.twitter.com/en/docs/basics/authentication/oauth-1-0a) |
66-
| darkMode | bool | false | Toggle dark mode |
67-
| language | string enum | "en" | Pick language for metadata of the post |
68-
| onHashTagPress | (hashtag:string) => void | Redirect to webpage | Overrides default behavior when pressing an hashtag in a Tweet |
69-
| onUserMentionPress | (userMention:string) => void | Redirect to webpage | Overrides default behavior when pressing a user mention in a Tweet |
70-
| onLinkPress | (link:string) => void | Redirect to webpage | Overrides default behavior when pressing a link in a Tweet |
71-
| cornerRadius | string enum | "small" | Chose the corner radius of UI elements in a post. Typically a post taking the whole width of the screen should have "big" whereas a post in a card should use the "small" value |
62+
| Name | Type | Default | Description |
63+
| --------------------- | ---------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
64+
| id | string | **Required** | Twitter post id |
65+
| consumerKey | string | **Required** | OAuth 1.0 Twitter key that is granted when you [register your app on Twitter Portal](https://developer.twitter.com/en/docs/basics/authentication/oauth-1-0a) |
66+
| consumerSecret | string | **Required** | OAuth 1.0 Twitter secret that is granted when you [register your app on Twitter Portal](https://developer.twitter.com/en/docs/basics/authentication/oauth-1-0a) |
67+
| darkMode | bool | false | Toggle dark mode |
68+
| language | string enum | "en" | Pick language for metadata of the post |
69+
| onHashTagPress | (hashtag:string) => void | Redirect to webpage | Overrides default behavior when pressing an hashtag in a Tweet |
70+
| onUserMentionPress | (userMention:string) => void | Redirect to webpage | Overrides default behavior when pressing a user mention in a Tweet |
71+
| onLinkPress | (link:string) => void | Redirect to webpage | Overrides default behavior when pressing a link in a Tweet |
72+
| cornerRadius | string enum | "small" | Chose the corner radius of UI elements in a post. Typically a post taking the whole width of the screen should have "big" whereas a post in a card should use the "small" value |
73+
| containerBorderRadius | number | 0 | Border radius of the container of the UI element |

‎src/Instagram/index.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,11 @@ interface PropsType {
1717
id: string;
1818
language?: LanguageAvailableType;
1919
darkMode: boolean;
20+
containerBorderRadius: number;
2021
}
2122

2223
export const Instagram = (props: PropsType) => {
23-
const { id, language, darkMode } = props;
24+
const { id, language, darkMode, containerBorderRadius } = props;
2425
const [
2526
instagramPostData,
2627
setInstagramPostData,
@@ -37,7 +38,7 @@ export const Instagram = (props: PropsType) => {
3738
const numberOfItems = instagramPostData.content.length;
3839
const isCarousel = numberOfItems > 1;
3940
return (
40-
<View style={styles.container}>
41+
<View style={styles.container(containerBorderRadius)}>
4142
<View style={styles.header}>
4243
<Image
4344
source={{ uri: instagramPostData.ownerPicture }}
@@ -133,15 +134,18 @@ export const Instagram = (props: PropsType) => {
133134
Instagram.defaultProps = {
134135
language: "en",
135136
darkMode: false,
137+
borderRadius: 0,
136138
};
137139

138140
const stylings = (darkMode: boolean) =>
139141
StyleSheet.create({
140-
container: {
142+
// @ts-ignore
143+
container: (containerBorderRadius: number) => ({
141144
backgroundColor: darkMode
142145
? backgroundColorDarkMode
143146
: backgroundColorLightMode,
144-
},
147+
borderRadius: containerBorderRadius,
148+
}),
145149
header: {
146150
margin: 16,
147151
flexDirection: "row",

‎src/Twitter/index.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ interface PropsType {
2121
onLinkPress?: (link: string) => void;
2222
cornerRadius?: "small" | "big";
2323
darkMode?: boolean;
24+
containerBorderRadius: number;
2425
}
2526

2627
export const Twitter = (props: PropsType) => {
@@ -34,6 +35,7 @@ export const Twitter = (props: PropsType) => {
3435
consumerSecret,
3536
cornerRadius,
3637
darkMode,
38+
containerBorderRadius,
3739
} = props;
3840
const appearance = darkMode ? "dark" : "light";
3941
const [data, setData] = React.useState<ITwitterPost | null>(null);
@@ -48,7 +50,7 @@ export const Twitter = (props: PropsType) => {
4850
const styles = evaluateTheme(appearance);
4951

5052
return (
51-
<View style={styles.container}>
53+
<View style={styles.container(containerBorderRadius)}>
5254
{data ? (
5355
<>
5456
<Header
@@ -152,16 +154,19 @@ export const Twitter = (props: PropsType) => {
152154

153155
Twitter.defaultProps = {
154156
cornerRadius: "small",
157+
borderRadius: 0,
155158
};
156159

157160
const evaluateTheme = (appearance: AppearanceTheme) => {
158161
const colors = getTheme(appearance);
159162
return StyleSheet.create({
160-
container: {
163+
// @ts-ignore
164+
container: (containerBorderRadius: number) => ({
161165
width: "100%",
162166
backgroundColor: colors.postBackgroundColor,
163167
paddingHorizontal: 20,
164-
},
168+
borderRadius: containerBorderRadius,
169+
}),
165170
topRow: {
166171
flexDirection: "row",
167172
justifyContent: "space-between",

0 commit comments

Comments
 (0)