Integrating Butter into our application took less than an hour and most of that time was spent on design work.
Luke Brean, Legally
React Native CMS
Powerful CMS. Zero headache.
Drop our API-based CMS into your React Native app in minutes.
Try ButterCMS free
![]()
"Best CMS on the market"
ButterCMS is an API-based CMS that integrates with React Native in minutes. Use ButterCMS with React Native to build CMS-powered apps quickly. Butter is great for blogs, dynamic pages, and more.
Butter's API slides right into our apps and lets us avoid having yet another WordPress site.
Daniel, Founder of Collective IdeaMarketers love Butter
SEO Landing Pages- Customer Case Studies
- Company News & Updates
- Events + Webinar Pages
- Education Center
- Location Pages
- and more...
Butter saves you development time
Save thousands of dollars worth of development time with our easy setup.
Everything you need
- Custom Page Types
- Custom Content Modeling
- Preview changes
- Media library
- CDN for assets
- Testing environment
- Localization
- Webhooks
Beautiful admin interface
Easy to use. Easy to customize.
Integrates with React Native
Our CMS has a simple content API and drop-in React Native SDK.
Butter requires zero maintenance
Never worry about security upgrades, hosting, or performance.
Try ButterCMS in your React Native appSetup in minutes
Above is quick video of integrating Butter's Pages API into an application.
Integrating Butter into your React Native app is dead simple. Here's a mini tutorial to get a feel for adding marketing pages to your app. You can also use our Content Fields to do advanced content modeling. For full a integration guide check out our Official React Native Guide
First you would set up a new Customer Case Study page type in Butter and create a page. With your page defined, the ButterCMS API will return it in JSON format like this:
{
"data": {
"slug": "acme-co",
"fields": {
"facebook_open_graph_title": "Acme Co loves ButterCMS",
"seo_title": "Acme Co Customer Case Study",
"headline": "Acme Co saved 200% on Anvil costs with ButterCMS",
"testimonial": "<p>We've been able to make anvils faster than ever before! - <em>Chief Anvil Maker</em></p>\r\n<p><img src=\"https://cdn.buttercms.com/NiA3IIP3Ssurz5eNJ15a\" alt=\"\" caption=\"false\" width=\"249\" height=\"249\" /></p>",
"customer_logo": "https://cdn.buttercms.com/c8oSTGcwQDC5I58km5WV",
}
}
}
To integrate this into your app, simply make a call to ButterCMS APIs using the ButterCMS client. Place this call in the componentDidMount hook:
home.jsimport React from 'react'
import { Text,View,StyleSheet,Image,Button } from 'react-native';
import { Actions } from 'react-native-router-flux';
import butter from './butter-client'
import { TouchableOpacity } from 'react-native-gesture-handler';
export default class Home extends React.Component {
state = {
data: ''
}
async componentDidMount() {
const resp = await butter.page.retrieve('*', 'home')
console.log(resp.data);
this.setState(resp.data)
}
render() {
const { fields } = this.state.data
const goToAbout = () => {
Actions.about()
}
const goToBlog = () => {
Actions.blog()
}
if (fields) {
return (
<View>
<Text style={styles.heading}>{fields.headline}</Text>
<Image style={styles.heroimage} source={{uri: fields.hero_image}}></Image>
<View style={styles.horizontal}>
<TouchableOpacity style={styles.button}>
<Button title={fields.call_to_action} onPress={goToAbout}></Button>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Button title="Blog" onPress={goToBlog}></Button>
</TouchableOpacity>
</View>
</View>
)
} else {
return (
<View>
<Text>Loading..</Text>
</View>
)
}
}
}
const styles=StyleSheet.create({
horizontal:{
flex:1,
flexDirection:'row',
alignItems:"center",
justifyContent:"center"
},
heading: {
fontSize:'2em',
fontFamily:'Georgia',
color: '#333333',
paddingTop:'10px'
},
heroimage:{
width:'100%',
height:'150px',
padding: '20px'
},
button:{
margin:20
}
})Get all page content of specific type. For instance, customers for the case study:
customers.jsimport React from 'react'
import { Text, ScrollView,StyleSheet,Image,Button } from 'react-native'
import { Actions } from 'react-native-router-flux'
import butter from './butter-client'
import { TouchableOpacity } from 'react-native-gesture-handler'
import HTMLView from 'react-native-htmlview';
export default class CaseStudy extends React.Component {
state = {
data: ''
}
async componentDidMount() {
const resp = await butter.page.list('customer_case_study')
this.setState(resp.data)
console.log(resp.data);
}
render() {
const { data } = this.state
const goToHome = () => {
Actions.home()
}
if (data) {
return (
<ScrollView style={{padding:20}}>
{data.map(page =>
<ScrollView style={styles.post} key={page.slug}>
<Text style={styles.heading}>{page.fields.seo_title}</Text>
<Image style={styles.logo} source={{ uri: page.fields.customer_logo }} />
<HTMLView value={page.fields.testimonial}></HTMLView>
</ScrollView>
)}
<TouchableOpacity style={styles.button}>
<Button title="Back to Home" onPress={goToHome}></Button>
</TouchableOpacity>
</ScrollView>
)
} else {
return (
<ScrollView>
<Text>Loading..</Text>
</ScrollView>
)
}
}
}
const styles = StyleSheet.create({
post:{
borderWidth:'1px',
borderStyle:'solid',
borderColor:'black',
padding:20
},
vertical: {
flex: 1,
flexDirection: 'column',
alignItems: "center",
justifyContent: "center"
},
heading: {
fontSize: '2em',
fontFamily: 'Georgia',
color: '#333333',
paddingTop: '10px'
},
logo: {
width: '90vw',
height: '150px',
alignItems:"center",
flex:1,
flexDirection:"column",
justifyContent:"center"
},
content: {
height:'100px',
width:'100%'
}
})About ButterCMS
ButterCMS is an API-based, or "headless", CMS. We're a hosted service and we maintain all of the infrastructure. For more information on how we compare to a traditional CMS check out API-based CMS vs Traditional CMS.
How do you compare to Wordpress?
In short, we offer all the same easy-to-use editing capabilities of Wordpress but are significantly easier for developers to setup and maintain. This means you spend less time working on your CMS and more time focusing on things important to your business.
Do you host my templates?
Unlike CMS's you might be used to, we don't control or host any of your templates. The design of your app (HTML + CSS) lives in your application along side the rest of your app. Your application calls our Content API and we return your content in JSON format. You can then render this content in any way you'd like.
Can I import my content?
Yep. To import existing content from another platform, simply send us an email.
What kind of database can I use?
No database required! We're a SaaS CMS or CaaS. You simply call our Content API from your app. We host and maintain all of the CMS infrastructure.
Can I host this?
No, we're a SaaS CMS or CaaS. You simply call our Content API from your app. We host and maintain all of the CMS infrastructure.
I have other questions
We're happy to help.
Chat with usAbout React Native
React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.